sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-23 15:38:55 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Improve text wrapping for attached files and preview context

Browse source 
For the research mode toggle, make it not fill when it's off
This commit is contained in:
sabaimran 2024-11-11 13:32:10 -08:00
parent dd36303bb7
commit cdda9c2e73
2 changed files with 40 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/interface/web/app/components/chatInputArea/chatInputArea.tsx
View file

@ -724,7 +724,6 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
/> />
) : ( ) : (
<ToggleLeft <ToggleLeft
weight="fill"
className={`w-6 h-6 inline-block ${props.agentColor ? convertColorToTextClass(props.agentColor) : convertColorToTextClass("orange")} rounded-full`} className={`w-6 h-6 inline-block ${props.agentColor ? convertColorToTextClass(props.agentColor) : convertColorToTextClass("orange")} rounded-full`}
/> />
)} )}

74
src/interface/web/app/components/chatMessage/chatMessage.tsx
View file

@ -708,41 +708,47 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
onMouseLeave={(event) => setIsHovering(false)} onMouseLeave={(event) => setIsHovering(false)}
onMouseEnter={(event) => setIsHovering(true)} 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="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)})
</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)}> <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 max-w-[200px]">
{file.name}
</span>
{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 <div
ref={messageRef} ref={messageRef}
className={styles.chatMessage} className={styles.chatMessage}