[BUG] Chatbox cannot load long chats instantly and does not show model info

[raisarker185-cell]

Bug Description

Chatbox exhibits severe performance degradation when opening long conversations. The application freezes or takes an excessively long time to render chats with large message histories. This indicates inefficient rendering and data-loading strategies, likely due to full conversation loading and lack of UI virtualization.

---

Steps to Reproduce

1. Open Chatbox
2. Navigate to a conversation with a large number of messages (e.g., 500+ messages)
3. Click to open the conversation
4. Scroll through the chat

---

Expected Results

• Chat should open instantly or within a short time
• Only recent messages should load initially
• Older messages should load progressively when scrolling
• UI should remain responsive during scrolling

---

Actual Results

• Chat takes a long time to open
• UI becomes unresponsive or lags heavily
• Entire conversation appears to be loaded and rendered at once
• Scrolling is slow and sometimes freezes

---

Screenshots

(Not provided — issue is consistently reproducible with large chats)

---

Desktop (please complete the following information):

• Operating System: Android (Native App environment)
• Application Version: (latest of play store)

---

Additional Context

• Issue becomes worse as chat size increases
• Likely caused by:
  • Full JSON loading of entire conversation
  • Rendering all messages in DOM simultaneously
  • Lack of pagination or virtualization
• Competing apps like and do not exhibit this issue due to more optimized architectures

---

🔧 Suggested Architectural Improvements (Critical)

1. Implement Virtualized Message Rendering

• Use libraries like:
  • react-window
  • react-virtualized
• Only render visible messages (~10–30 at a time)
• Prevent DOM overload

---

2. Introduce Pagination / Infinite Scroll

• Load only recent messages initially (e.g., last 50)
• Fetch older messages on scroll (cursor-based pagination)
• Avoid full conversation load

---

3. Separate Data Layer from UI Layer

• Store full conversation in backend or indexed storage
• Send partial data to UI
• Avoid parsing large JSON blobs in frontend

---

4. Enable Streaming Responses

• Use:
  • Server-Sent Events (SSE)
  • WebSockets
• Render tokens incrementally instead of full response blocks

---

5. Implement Message Chunking

• Split long messages into smaller renderable units
• Avoid large text blocks blocking rendering thread

---

6. Optimize State Management

• Avoid storing entire conversation in a single state object
• Use normalized state structure:
  • message IDs
  • indexed lookup
• Reduce re-renders

---

7. Add Lazy Hydration (Advanced)

• Defer rendering of off-screen components
• Hydrate only visible UI

---

8. Optional: Chat Compression Strategy

• Summarize or collapse older messages
• Provide “expand history” option

---

⚙️ Reference Architecture (ChatGPT-like)

[Frontend (React + Virtualization)]
↓
[API Layer (Pagination + Streaming)]
↓
[Conversation Store (Indexed / DB)]
↓
[LLM Providers (OpenAI / Groq / etc)]

---

💡 Key Insight

The issue is not model-related — it is purely frontend rendering and data loading inefficiency.

Fixing:

• Virtualization
• Pagination
• Streaming

→ will eliminate ~90% of the lag.

---

中文版本 (简化)

Bug 描述

当聊天记录较长时，Chatbox 会出现严重卡顿甚至无响应的问题，说明当前加载和渲染机制存在性能缺陷。

---

重现步骤

1. 打开 Chatbox
2. 进入一个包含大量消息的聊天（500+）
3. 点击进入
4. 滚动聊天

---

期望结果

• 聊天快速打开
• 仅加载最近消息
• 向上滚动时加载历史消息
• UI 保持流畅

---

实际结果

• 打开聊天很慢
• 界面卡顿或冻结
• 一次性加载全部消息

---

建议改进

• 使用虚拟列表（virtual list）
• 实现分页加载（infinite scroll）
• 避免一次性渲染全部消息
• 支持流式输出（streaming）

---