Fix: User Message overflow when its too long

Author: ShenKSPZ

INSTALLATION.md

@@ -5,14 +5,10 @@
 
 ![TensorBlock Studio Banner](https://github.com/TensorBlock/TensorBlock-Studio/blob/dev-production-milestone%231/docs/imgs/TensorBlock%20Studio%20Banner.png?raw=true)
 
----
-
 ## What Makes TensorBlock Studio Different?
 
 Forget generic AI chat tools. **TensorBlock Studio** is a new kind of workspace — one that's lightweight, developer-friendly, and yet welcoming to beginners. It's designed around control, clarity, and creation.
 
----
-
 ## Features
 
 - Multiple LLM provider
@@ -30,19 +26,15 @@ Forget generic AI chat tools. **TensorBlock Studio** is a new kind of workspace
 
 ---
 
-## Short-Term Roadmap
+# Short-Term Roadmap
 
 - Sharing and exports
 - Collection of knowledge pieces
 - Mobile-friendly UI (PWA or native shell)
 - Plugin system for extensions and custom logic
 - More themes
 
----
-
-[TODO: 完善以下所有内容]
-
-## Tech Stack
+# Tech Stack
 
 - Framework: Next.js 14
 - UI: Tailwind CSS + ShadCN + Framer Motion
@@ -53,33 +45,55 @@ Forget generic AI chat tools. **TensorBlock Studio** is a new kind of workspace
 
 ---
 
-## Getting Started
+# Getting Started
+
+### Installation
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/TensorBlock/TensorBlock-Studio.git
+   cd tensorblock-studio
+   ```
+
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+### Development
+
+Run the application in development mode:
 
 ```bash
-git clone https://github.com/your-org/tensorblock-studio.git
-cd tensorblock-studio
-pnpm install
-pnpm dev
+npm run dev
+```
+
+### Building for Production
+
+Package the application for your current platform:
+
+```bash
+npm run electron:build:current_platform
+```
 
 ---
 
-## Contributing
+# 📄 Documentation
 
-We’re a tiny team (1 designer, 1 frontend, 1 PM) building the tools we wish existed.  
-Pull requests, bug reports, and feedback are always welcome!
+Comprehensive documentation is available in the `docs` directory:
+
+- [Documentation Index](docs/docs_index.md) - Main documentation entry point with links to all sections
+- [Overview](docs/overview.md) - System architecture and high-level application design
 
 ---
 
-## Links
+# Contributing
 
-- Website: 
-- Product Hunt: 
-- 小红书
-- Reddit
-- X
+We're a tiny team (1 designer, 1 frontend, 1 PM) building the tools we wish existed.  
+Pull requests, bug reports, and feedback are always welcome!
 
 ---
 
-## License
+# License
 
 MIT

README.md

@@ -9,7 +9,7 @@ interface ChatHistoryListProps {
   folders: ConversationFolder[];
   activeConversationId: string | null;
   onSelectConversation: (conversationId: string) => void;
-  onCreateNewChat: () => void;
+  onCreateNewChat: (folderId?: string) => void;
   onCreateNewFolder: () => void;
   onRenameConversation: (conversationId: string, newTitle: string) => void;
   onDeleteConversation: (conversationId: string) => void;
@@ -146,6 +146,11 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
     }
   };
 
+  const handleNewChatClick = (e: React.MouseEvent, folderId: string) => {
+    e.stopPropagation();
+    onCreateNewChat(folderId);
+  };
+
   const handleRenameClick = (e: React.MouseEvent, item: Conversation | ConversationFolder, type: 'conversation' | 'folder') => {
     e.stopPropagation();
     setEditingId(type === 'conversation' ? (item as Conversation).conversationId : (item as ConversationFolder).folderId);
@@ -343,6 +348,13 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
 
   // Create context menu items for a folder
   const getFolderContextMenuItems = (folder: ConversationFolder): ContextMenuItem[] => [
+    {
+      id: 'new chat',
+      icon: PlusCircle,
+      label: 'New Chat',
+      onClick: (e) => handleNewChatClick(e, folder.folderId),
+      color: 'text-gray-700'
+    },
     {
       id: 'rename',
       icon: Edit,
@@ -437,7 +449,7 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
         </button>
 
         <button
-          onClick={onCreateNewChat}
+          onClick={() => onCreateNewChat()}
           className="flex items-center justify-center flex-1 h-full gap-2 pr-2 text-sm font-medium transition-all duration-100 primary-btn-border primary-btn-bg-color primary-btn-text-color"
         >
           <PlusCircle size={16}/>
@@ -485,6 +497,7 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
                         onDragOver={(e) => handleDragOver(e, (item as ConversationFolder).folderId, 'folder')}
                         onDragLeave={handleDragLeave}
                         onDrop={(e) => handleDrop(e, (item as ConversationFolder).folderId, 'folder')}
+                        onContextMenu={(e) => handleMenuClick(e, (item as ConversationFolder).folderId, 'folder')}
                       >
                         {isCollapsed ? (
                           <Folder fill={(item as ConversationFolder).colorFlag} size={16} className="mx-auto text-gray-600" />
@@ -503,7 +516,9 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
                               <Folder fill={(item as ConversationFolder).colorFlag} size={16} className="flex-shrink-0 mr-1 text-gray-600" />
                               <span className="font-semibold truncate select-none">{(item as ConversationFolder).folderName}</span>
                             </div>
-                            <div onClick={(e) => handleMenuClick(e, (item as ConversationFolder).folderId, 'folder')}>
+                            <div 
+                              onClick={(e) => handleMenuClick(e, (item as ConversationFolder).folderId, 'folder')}
+                            >
                               <MoreVertical size={16} className="flex-shrink-0" />
                             </div>
                           </>
@@ -546,6 +561,7 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
                                 onDragOver={(e) => handleDragOver(e, (item as ConversationFolder).folderId, 'folder')}
                                 onDrop={(e) => handleDrop(e, (item as ConversationFolder).folderId, 'folder')}
                                 onClick={() => onSelectConversation(conversation.conversationId)}
+                                onContextMenu={(e) => handleMenuClick(e, conversation.conversationId, 'conversation')}
                                 className={`flex items-center justify-between w-full px-3 py-2 text-left conversation-item-border transition-all duration-100 cursor-pointer ${
                                   activeConversationId === conversation.conversationId
                                     ? 'conversation-selected-item-bg-color conversation-selected-item-text-color'
@@ -561,7 +577,9 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
                                   <MessageSquare size={16} className="flex-shrink-0 mr-1" />
                                   <span className="truncate">{conversation.title}</span>
                                 </div>
-                                <div onClick={(e) => handleMenuClick(e, conversation.conversationId, 'conversation')}>
+                                <div 
+                                  onClick={(e) => handleMenuClick(e, conversation.conversationId, 'conversation')}
+                                >
                                   <MoreVertical size={16} className="flex-shrink-0" />
                                 </div>
                               </div>
@@ -602,6 +620,7 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
                         onDragStart={(e) => handleDragStart(e, { id: (item as Conversation).conversationId, type: 'conversation' })}
                         onDragEnd={handleDragEnd}
                         onClick={() => onSelectConversation((item as Conversation).conversationId)}
+                        onContextMenu={(e) => handleMenuClick(e, (item as Conversation).conversationId, 'conversation')}
                         className={`flex flex-1 items-center justify-between mx-2 conversation-item-border px-3 py-2 text-left transition-all duration-100 cursor-pointer ${
                           activeConversationId === (item as Conversation).conversationId
                             ? 'conversation-selected-item-bg-color conversation-selected-item-text-color'
@@ -617,7 +636,9 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
                               <MessageSquare size={16} className="flex-shrink-0 mr-2" />
                               <span className="truncate">{(item as Conversation).title}</span>
                             </div>
-                            <div onClick={(e) => handleMenuClick(e, (item as Conversation).conversationId, 'conversation')}>
+                            <div 
+                              onClick={(e) => handleMenuClick(e, (item as Conversation).conversationId, 'conversation')}
+                            >
                               <MoreVertical size={16} className="flex-shrink-0" />
                             </div>
                           </>

src/components/chat/ChatHistoryList.tsx

@@ -274,10 +274,12 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   const hasStreamingMessage = Array.from(activeConversation.messages.values()).some(m => m.messageId.startsWith('streaming-'));
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col w-full h-full max-w-full">
       {/* Messages area */}
       <div className="flex-1 p-4 space-y-4 overflow-y-auto">
         {getMessagesList().map((message) => {
+          if(message.role === 'system') return null;
+
           const isUserMessage = message.role === 'user';
           const isEditing = editingMessageId === message.messageId;
 
@@ -318,8 +320,6 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
                 }
               ];
 
-          if(message.role === 'system') return null;
-          
           return (
             <div 
               key={message.messageId}
@@ -379,14 +379,14 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
                   }
 
                   <div 
-                    className={`max-w-[80%] rounded-lg p-3 ${
+                    className={`max-w-[80%] h-fit rounded-lg p-3 text-wrap break-words ${
                       isUserMessage 
                         ? 'message-user rounded-tr-none' 
                         : 'message-assistant rounded-tl-none'
                     }`}
                   >
                     {isUserMessage ? (
-                      <p className="whitespace-pre-wrap">{MessageHelper.MessageContentToText(message.content)}</p>
+                      <MarkdownContent content={message.content} />
                     ) : (
                       (message.content.length === 0 || MessageHelper.MessageContentToText(message.content).length === 0) ? (
                         <div className="w-4 h-4 bg-blue-600 rounded-full animate-bounce"></div>