feat: update README files for realtime collab

- Added a section on real-time collaboration in all language-specific README files, detailing how to invite members and chat in real-time.
- Included visual elements to enhance user understanding of the new features.
- Updated the homepage to include new use cases for real-time chat and comments, improving the overall user experience.

README.es.md

@@ -74,6 +74,8 @@ https://github.com/user-attachments/assets/a0a16566-6967-4374-ac51-9b3e07fbecd7
 
    <p align="center"><img src="https://github.com/user-attachments/assets/25f94cb3-18f8-4854-afd9-27b7bfd079cb" alt="Generación de Imágenes" /></p>
 
+   - Y más próximamente.
+
 
 ### Auto-Hospedado
 
@@ -93,6 +95,28 @@ Después de iniciar, abre [http://localhost:3000](http://localhost:3000) en tu n
 
 Para Docker Compose, instalación manual y otras opciones de despliegue, consulta la [documentación](https://www.surfsense.com/docs/).
 
+### Cómo Colaborar en Tiempo Real (Beta)
+
+1. Ve a la página de Gestión de Miembros y crea una invitación.
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/40ed7683-5aa6-48a0-a3df-00575528c392" alt="Invitar Miembros" /></p>
+
+2. El compañero de equipo se une y ese SearchSpace se comparte.
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/ea4e1057-4d2b-4fd2-9ca0-cd19286a285e" alt="Flujo de Unión por Invitación" /></p>
+
+3. Haz el chat compartido.
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/17b93904-0888-4c3a-ac12-51a24a8ea26a" alt="Hacer Chat Compartido" /></p>
+
+4. Tu equipo ahora puede chatear en tiempo real.
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/83803ac2-fbce-4d93-aae3-85eb85a3053a" alt="Chat en Tiempo Real" /></p>
+
+5. Agrega comentarios para etiquetar a compañeros de equipo.
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/3b04477d-8f42-4baa-be95-867c1eaeba87" alt="Comentarios en Tiempo Real" /></p>
+
 ## Funcionalidades Principales
 
 | Funcionalidad | Descripción |
@@ -136,14 +160,11 @@ Consulta nuestra hoja de ruta pública y contribuye con tus ideas o comentarios:
 **Tablero Kanban:** [SurfSense Project Board](https://github.com/users/MODSetter/projects/3)
 
 
-## Contribuir 
+## Contribuir
 
-¡Las contribuciones son muy bienvenidas! Una contribución puede ser tan pequeña como una estrella o incluso encontrar y crear issues.
+Todas las contribuciones son bienvenidas, desde estrellas y reportes de bugs hasta mejoras del backend. Consulta [CONTRIBUTING.md](CONTRIBUTING.md) para comenzar.
-El ajuste fino del Backend siempre es deseado.
 
-Para guías detalladas de contribución, consulta nuestro archivo [CONTRIBUTING.md](CONTRIBUTING.md).
+Gracias a todos nuestros Surfers:
-
-## Contribuidores
 
 <a href="https://github.com/MODSetter/SurfSense/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=MODSetter/SurfSense" />

README.hi.md

@@ -74,6 +74,8 @@ https://github.com/user-attachments/assets/a0a16566-6967-4374-ac51-9b3e07fbecd7
 
    <p align="center"><img src="https://github.com/user-attachments/assets/25f94cb3-18f8-4854-afd9-27b7bfd079cb" alt="इमेज जनरेशन" /></p>
 
+   - और भी बहुत कुछ जल्द आ रहा है।
+
 
 ### सेल्फ-होस्टेड
 
@@ -93,6 +95,28 @@ docker run -d -p 3000:3000 -p 8000:8000 -p 5133:5133 \
 
 Docker Compose, मैनुअल इंस्टॉलेशन और अन्य डिप्लॉयमेंट विकल्पों के लिए, [डॉक्स](https://www.surfsense.com/docs/) देखें।
 
+### रीयल-टाइम सहयोग कैसे करें (बीटा)
+
+1. सदस्य प्रबंधन पेज पर जाएं और एक आमंत्रण बनाएं।
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/40ed7683-5aa6-48a0-a3df-00575528c392" alt="सदस्यों को आमंत्रित करें" /></p>
+
+2. टीममेट जुड़ता है और वह SearchSpace साझा हो जाता है।
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/ea4e1057-4d2b-4fd2-9ca0-cd19286a285e" alt="आमंत्रण स्वीकार प्रवाह" /></p>
+
+3. चैट को साझा करें।
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/17b93904-0888-4c3a-ac12-51a24a8ea26a" alt="चैट साझा करें" /></p>
+
+4. आपकी टीम अब रीयल-टाइम में चैट कर सकती है।
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/83803ac2-fbce-4d93-aae3-85eb85a3053a" alt="रीयल-टाइम चैट" /></p>
+
+5. टीममेट्स को टैग करने के लिए कमेंट जोड़ें।
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/3b04477d-8f42-4baa-be95-867c1eaeba87" alt="रीयल-टाइम कमेंट्स" /></p>
+
 ## प्रमुख विशेषताएं
 
 | विशेषता | विवरण |
@@ -136,14 +160,11 @@ Docker Compose, मैनुअल इंस्टॉलेशन और अन
 **कानबन बोर्ड:** [SurfSense Project Board](https://github.com/users/MODSetter/projects/3)
 
 
-## योगदान करें 
+## योगदान करें
 
-योगदान का बहुत स्वागत है! योगदान एक स्टार जितना छोटा हो सकता है या issues खोजना और बनाना भी।
+सभी योगदान स्वागत योग्य हैं, स्टार और बग रिपोर्ट से लेकर बैकएंड सुधार तक। शुरू करने के लिए [CONTRIBUTING.md](CONTRIBUTING.md) देखें।
-बैकएंड की फ़ाइन-ट्यूनिंग हमेशा वांछित है।
 
-विस्तृत योगदान दिशानिर्देशों के लिए, कृपया हमारी [CONTRIBUTING.md](CONTRIBUTING.md) फ़ाइल देखें।
+हमारे सभी Surfers को धन्यवाद:
-
-## योगदानकर्ता
 
 <a href="https://github.com/MODSetter/SurfSense/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=MODSetter/SurfSense" />

README.md

@@ -74,6 +74,8 @@ https://github.com/user-attachments/assets/a0a16566-6967-4374-ac51-9b3e07fbecd7
 
    <p align="center"><img src="https://github.com/user-attachments/assets/25f94cb3-18f8-4854-afd9-27b7bfd079cb" alt="Image Generation" /></p>
 
+   - And more coming soon.
+
 
 ### Self Hosted
 
@@ -93,6 +95,28 @@ After starting, open [http://localhost:3000](http://localhost:3000) in your brow
 
 For Docker Compose, manual installation, and other deployment options, check the [docs](https://www.surfsense.com/docs/).
 
+### How to Realtime Collaborate (Beta)
+
+1. Go to Manage Members page and create an invite.
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/40ed7683-5aa6-48a0-a3df-00575528c392" alt="Invite Members" /></p>
+
+2. Teammate joins and that SearchSpace becomes shared.
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/ea4e1057-4d2b-4fd2-9ca0-cd19286a285e" alt="Invite Join Flow" /></p>
+
+3. Make chat shared.
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/17b93904-0888-4c3a-ac12-51a24a8ea26a" alt="Make Chat Shared" /></p>
+
+4. Your team can now chat in realtime.
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/83803ac2-fbce-4d93-aae3-85eb85a3053a" alt="Realtime Chat" /></p>
+
+5. Add comment to tag teammates.
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/3b04477d-8f42-4baa-be95-867c1eaeba87" alt="Realtime Comments" /></p>
+
 ## Key Features
 
 | Feature | Description |
@@ -136,14 +160,11 @@ Check out our public roadmap and contribute your ideas or feedback:
 **Kanban Board:** [SurfSense Project Board](https://github.com/users/MODSetter/projects/3)
 
 
-## Contribute 
+## Contribute
 
-Contributions are very welcome! A contribution can be as small as a star or even finding and creating issues.
+All contributions welcome, from stars and bug reports to backend improvements. See [CONTRIBUTING.md](CONTRIBUTING.md) to get started.
-Fine-tuning the Backend is always desired.
 
-For detailed contribution guidelines, please see our [CONTRIBUTING.md](CONTRIBUTING.md) file.
+Thanks to all our Surfers:
-
-## Contributors
 
 <a href="https://github.com/MODSetter/SurfSense/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=MODSetter/SurfSense" />

README.pt-BR.md

@@ -74,6 +74,8 @@ https://github.com/user-attachments/assets/a0a16566-6967-4374-ac51-9b3e07fbecd7
 
    <p align="center"><img src="https://github.com/user-attachments/assets/25f94cb3-18f8-4854-afd9-27b7bfd079cb" alt="Geração de Imagens" /></p>
 
+   - E mais em breve.
+
 
 ### Auto-Hospedado
 
@@ -93,6 +95,28 @@ Após iniciar, abra [http://localhost:3000](http://localhost:3000) no seu navega
 
 Para Docker Compose, instalação manual e outras opções de implantação, consulte a [documentação](https://www.surfsense.com/docs/).
 
+### Como Colaborar em Tempo Real (Beta)
+
+1. Acesse a página de Gerenciar Membros e crie um convite.
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/40ed7683-5aa6-48a0-a3df-00575528c392" alt="Convidar Membros" /></p>
+
+2. O colega aceita e aquele SearchSpace se torna compartilhado.
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/ea4e1057-4d2b-4fd2-9ca0-cd19286a285e" alt="Fluxo de Entrada por Convite" /></p>
+
+3. Torne o chat compartilhado.
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/17b93904-0888-4c3a-ac12-51a24a8ea26a" alt="Tornar Chat Compartilhado" /></p>
+
+4. Sua equipe agora pode conversar em tempo real.
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/83803ac2-fbce-4d93-aae3-85eb85a3053a" alt="Chat em Tempo Real" /></p>
+
+5. Adicione comentários para marcar colegas de equipe.
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/3b04477d-8f42-4baa-be95-867c1eaeba87" alt="Comentários em Tempo Real" /></p>
+
 ## Funcionalidades Principais
 
 | Funcionalidade | Descrição |
@@ -136,14 +160,11 @@ Confira nosso roadmap público e contribua com suas ideias ou feedback:
 **Quadro Kanban:** [SurfSense Project Board](https://github.com/users/MODSetter/projects/3)
 
 
-## Contribuir 
+## Contribuir
 
-Contribuições são muito bem-vindas! Uma contribuição pode ser tão pequena quanto uma estrela ou até mesmo encontrar e criar issues.
+Todas as contribuições são bem-vindas, desde estrelas e relatórios de bugs até melhorias no backend. Consulte [CONTRIBUTING.md](CONTRIBUTING.md) para começar.
-O ajuste fino do Backend é sempre desejado.
 
-Para diretrizes detalhadas de contribuição, consulte nosso arquivo [CONTRIBUTING.md](CONTRIBUTING.md).
+Obrigado a todos os nossos Surfers:
-
-## Contribuidores
 
 <a href="https://github.com/MODSetter/SurfSense/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=MODSetter/SurfSense" />

README.zh-CN.md

@@ -74,6 +74,8 @@ https://github.com/user-attachments/assets/a0a16566-6967-4374-ac51-9b3e07fbecd7
 
    <p align="center"><img src="https://github.com/user-attachments/assets/25f94cb3-18f8-4854-afd9-27b7bfd079cb" alt="图像生成" /></p>
 
+   - 更多功能即将推出。
+
 
 ### 自托管
 
@@ -93,6 +95,28 @@ docker run -d -p 3000:3000 -p 8000:8000 -p 5133:5133 \
 
 如需 Docker Compose、手动安装及其他部署方式，请查看[文档](https://www.surfsense.com/docs/)。
 
+### 如何实时协作（Beta）
+
+1. 前往成员管理页面并创建邀请。
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/40ed7683-5aa6-48a0-a3df-00575528c392" alt="邀请成员" /></p>
+
+2. 队友加入后，该 SearchSpace 变为共享。
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/ea4e1057-4d2b-4fd2-9ca0-cd19286a285e" alt="邀请加入流程" /></p>
+
+3. 将聊天设为共享。
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/17b93904-0888-4c3a-ac12-51a24a8ea26a" alt="设为共享聊天" /></p>
+
+4. 您的团队现在可以实时聊天。
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/83803ac2-fbce-4d93-aae3-85eb85a3053a" alt="实时聊天" /></p>
+
+5. 添加评论以标记队友。
+
+   <p align="center"><img src="https://github.com/user-attachments/assets/3b04477d-8f42-4baa-be95-867c1eaeba87" alt="实时评论" /></p>
+
 ## 核心功能
 
 | 功能 | 描述 |
@@ -136,14 +160,11 @@ docker run -d -p 3000:3000 -p 8000:8000 -p 5133:5133 \
 **看板：** [SurfSense Project Board](https://github.com/users/MODSetter/projects/3)
 
 
-## 贡献 
+## 贡献
 
-非常欢迎贡献！贡献可以小到一个 Star，甚至是发现和创建问题。
+欢迎所有贡献，从 Star 和 Bug 报告到后端改进。请参阅 [CONTRIBUTING.md](CONTRIBUTING.md) 开始贡献。
-后端的微调总是受欢迎的。
 
-有关详细的贡献指南，请参阅我们的 [CONTRIBUTING.md](CONTRIBUTING.md) 文件。
+感谢所有 Surfers:
-
-## 贡献者
 
 <a href="https://github.com/MODSetter/SurfSense/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=MODSetter/SurfSense" />

surfsense_web/components/homepage/use-cases-grid.tsx

@@ -29,6 +29,16 @@ const useCases = [
 		description: "Generate images directly from your conversations.",
 		src: "/homepage/hero_tutorial/ImageGenGif.gif",
 	},
+	{
+		title: "Realtime Chat",
+		description: "Chat together in realtime with your team.",
+		src: "/homepage/hero_realtime/RealTimeChatGif.gif",
+	},
+	{
+		title: "Realtime Comments",
+		description: "Add comments and tag teammates on any message.",
+		src: "/homepage/hero_realtime/RealTimeCommentsFlow.gif",
+	},
 ];
 
 function UseCaseCard({
@@ -85,16 +95,23 @@ export function UseCasesGrid() {
 				</h2>
 			</div>
 
-			{/* First row: 2 larger cards */}
+			{/* Row 1: 2 larger cards */}
 			<div className="grid grid-cols-1 gap-5 md:grid-cols-2">
 				{useCases.slice(0, 2).map((useCase) => (
 					<UseCaseCard key={useCase.title} {...useCase} />
 				))}
 			</div>
 
-			{/* Second row: 3 equal cards */}
+			{/* Row 2: 3 equal cards */}
 			<div className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
-				{useCases.slice(2).map((useCase) => (
+				{useCases.slice(2, 5).map((useCase) => (
+					<UseCaseCard key={useCase.title} {...useCase} />
+				))}
+			</div>
+
+			{/* Row 3: 2 cards */}
+			<div className="mt-5 grid grid-cols-1 gap-5 md:grid-cols-2">
+				{useCases.slice(5).map((useCase) => (
 					<UseCaseCard key={useCase.title} {...useCase} />
 				))}
 			</div>

surfsense_web/content/docs/how-to/meta.json

@@ -1,5 +1,5 @@
 {
 	"title": "How to",
-	"pages": ["electric-sql"],
+	"pages": ["electric-sql", "realtime-collaboration"],
 	"defaultOpen": false
 }

surfsense_web/content/docs/how-to/realtime-collaboration.mdx

@@ -0,0 +1,40 @@
+---
+title: Realtime Collaboration
+description: How to invite teammates, share chats, and collaborate in realtime on SurfSense
+---
+
+# Realtime Collaboration
+
+SurfSense supports realtime collaboration so your team can work together on shared Search Spaces and chats. This guide walks you through the full setup.
+
+## Step 1: Invite Members
+
+Go to the **Manage Members** page in your Search Space and create an invite for your teammates.
+
+<img src="/homepage/hero_realtime/InviteMembersGif.gif" alt="Invite Members" style={{ width: '100%', borderRadius: '12px' }} />
+
+## Step 2: Teammate Joins
+
+Your teammate accepts the invite and the Search Space becomes shared between you.
+
+<img src="/homepage/hero_realtime/InviteJoinFlow.gif" alt="Invite Join Flow" style={{ width: '100%', borderRadius: '12px' }} />
+
+## Step 3: Make Chat Shared
+
+Toggle any chat to **Shared** so your team can see and participate in it.
+
+<img src="/homepage/hero_realtime/MakeChatSharedGif.gif" alt="Make Chat Shared" style={{ width: '100%', borderRadius: '12px' }} />
+
+## Step 4: Chat in Realtime
+
+Your team can now chat together in realtime. Messages appear instantly for all participants.
+
+<img src="/homepage/hero_realtime/RealTimeChatGif.gif" alt="Realtime Chat" style={{ width: '100%', borderRadius: '12px' }} />
+
+## Step 5: Add Comments
+
+Tag teammates by adding comments on any message. Great for reviews, feedback, or follow-ups.
+
+<img src="/homepage/hero_realtime/RealTimeCommentsFlow.gif" alt="Realtime Comments" style={{ width: '100%', borderRadius: '12px' }} />
+
+