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

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`}
/> />
)} )}

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

@ -708,19 +708,22 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
onMouseLeave={(event) => setIsHovering(false)} onMouseLeave={(event) => setIsHovering(false)}
onMouseEnter={(event) => setIsHovering(true)} onMouseEnter={(event) => setIsHovering(true)}
> >
<div className={chatMessageWrapperClasses(props.chatMessage)}>
{props.chatMessage.queryFiles && props.chatMessage.queryFiles.length > 0 && ( {props.chatMessage.queryFiles && props.chatMessage.queryFiles.length > 0 && (
<div className="flex flex-wrap flex-col m-2 max-w-full"> <div className="flex flex-wrap flex-col mb-2 max-w-full">
{props.chatMessage.queryFiles.map((file, index) => ( {props.chatMessage.queryFiles.map((file, index) => (
<Dialog key={index}> <Dialog key={index}>
<DialogTrigger asChild> <DialogTrigger asChild>
<div <div
className="flex items-center space-x-2 cursor-pointer bg-gray-500 bg-opacity-25 rounded-lg m-1 p-2 w-full 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"> <div className="flex-shrink-0">
{getIconFromFilename(file.file_type)} {getIconFromFilename(file.file_type)}
</div> </div>
<span className="truncate flex-1 min-w-0">{file.name}</span> <span className="truncate flex-1 min-w-0 max-w-[200px]">
{file.name}
</span>
{file.size && ( {file.size && (
<span className="text-gray-400 flex-shrink-0"> <span className="text-gray-400 flex-shrink-0">
({convertBytesToText(file.size)}) ({convertBytesToText(file.size)})
@ -730,10 +733,14 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>{file.name}</DialogTitle> <DialogTitle>
<div className="truncate min-w-0 break-words break-all text-wrap max-w-full whitespace-normal">
{file.name}
</div>
</DialogTitle>
</DialogHeader> </DialogHeader>
<DialogDescription> <DialogDescription>
<ScrollArea className="h-72 w-full rounded-md"> <ScrollArea className="h-72 w-full rounded-md break-words break-all text-wrap">
{file.content} {file.content}
</ScrollArea> </ScrollArea>
</DialogDescription> </DialogDescription>
@ -742,7 +749,6 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
))} ))}
</div> </div>
)} )}
<div className={chatMessageWrapperClasses(props.chatMessage)}>
<div <div
ref={messageRef} ref={messageRef}
className={styles.chatMessage} className={styles.chatMessage}