Improve text wrapping for attached files and preview context

For the research mode toggle, make it not fill when it's off
khoj-ai · Nov 11, 2024 · cdda9c2 · cdda9c2
1 parent dd36303
commit cdda9c2
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 34 deletions.
diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -724,7 +724,6 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                                     />
                                 ) : (
                                     <ToggleLeft
-                                        weight="fill"
                                         className={`w-6 h-6 inline-block ${props.agentColor ? convertColorToTextClass(props.agentColor) : convertColorToTextClass("orange")} rounded-full`}
                                     />
                                 )}

diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx
@@ -708,41 +708,47 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
             onMouseLeave={(event) => setIsHovering(false)}
             onMouseEnter={(event) => setIsHovering(true)}
         >
-            {props.chatMessage.queryFiles && props.chatMessage.queryFiles.length > 0 && (
-                <div className="flex flex-wrap flex-col m-2 max-w-full">
-                    {props.chatMessage.queryFiles.map((file, index) => (
-                        <Dialog key={index}>
-                            <DialogTrigger asChild>
-                                <div
-                                    className="flex items-center space-x-2 cursor-pointer bg-gray-500 bg-opacity-25 rounded-lg m-1 p-2 w-full
+            <div className={chatMessageWrapperClasses(props.chatMessage)}>
+                {props.chatMessage.queryFiles && props.chatMessage.queryFiles.length > 0 && (
+                    <div className="flex flex-wrap flex-col mb-2 max-w-full">
+                        {props.chatMessage.queryFiles.map((file, index) => (
+                            <Dialog key={index}>
+                                <DialogTrigger asChild>
+                                    <div
+                                        className="flex items-center space-x-2 cursor-pointer bg-gray-500 bg-opacity-25 rounded-lg p-2 w-full
                                 "
-                                >
-                                    <div className="flex-shrink-0">
-                                        {getIconFromFilename(file.file_type)}
-                                    </div>
-                                    <span className="truncate flex-1 min-w-0">{file.name}</span>
-                                    {file.size && (
-                                        <span className="text-gray-400 flex-shrink-0">
-                                            ({convertBytesToText(file.size)})
+                                    >
+                                        <div className="flex-shrink-0">
+                                            {getIconFromFilename(file.file_type)}
+                                        </div>
+                                        <span className="truncate flex-1 min-w-0 max-w-[200px]">
+                                            {file.name}
                                         </span>
-                                    )}
-                                </div>
-                            </DialogTrigger>
-                            <DialogContent>
-                                <DialogHeader>
-                                    <DialogTitle>{file.name}</DialogTitle>
-                                </DialogHeader>
-                                <DialogDescription>
-                                    <ScrollArea className="h-72 w-full rounded-md">
-                                        {file.content}
-                                    </ScrollArea>
-                                </DialogDescription>
-                            </DialogContent>
-                        </Dialog>
-                    ))}
-                </div>
-            )}
-            <div className={chatMessageWrapperClasses(props.chatMessage)}>
+                                        {file.size && (
+                                            <span className="text-gray-400 flex-shrink-0">
+                                                ({convertBytesToText(file.size)})
+                                            </span>
+                                        )}
+                                    </div>
+                                </DialogTrigger>
+                                <DialogContent>
+                                    <DialogHeader>
+                                        <DialogTitle>
+                                            <div className="truncate min-w-0 break-words break-all text-wrap max-w-full whitespace-normal">
+                                                {file.name}
+                                            </div>
+                                        </DialogTitle>
+                                    </DialogHeader>
+                                    <DialogDescription>
+                                        <ScrollArea className="h-72 w-full rounded-md break-words break-all text-wrap">
+                                            {file.content}
+                                        </ScrollArea>
+                                    </DialogDescription>
+                                </DialogContent>
+                            </Dialog>
+                        ))}
+                    </div>
+                )}
                 <div
                     ref={messageRef}
                     className={styles.chatMessage}
-Original file line number
+Diff line change
@@ Expand Up @@
                                         />
                                     ) : (
                                         <ToggleLeft
-                                            weight="fill"
                                             className={`w-6 h-6 inline-block ${props.agentColor ? convertColorToTextClass(props.agentColor) : convertColorToTextClass("orange")} rounded-full`}
                                         />
                                     )}
@@ Expand Down @@