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

Process attached files in the chat history and add them to the chat message

Browse source
This commit is contained in:
sabaimran 2024-11-07 16:06:58 -08:00
parent a89160e2f7
commit 3a51996f64
2 changed files with 42 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -373,6 +373,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
images: message.images, images: message.images,
conversationId: props.conversationId, conversationId: props.conversationId,
turnId: messageTurnId, turnId: messageTurnId,
attachedFiles: message.attachedFiles,
}} }}
customClassName="fullHistory" customClassName="fullHistory"
borderLeftColor={`${data?.agent?.color}-500`} borderLeftColor={`${data?.agent?.color}-500`}

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

@ -40,6 +40,18 @@ import { AgentData } from "@/app/agents/page";
import renderMathInElement from "katex/contrib/auto-render"; import renderMathInElement from "katex/contrib/auto-render";
import "katex/dist/katex.min.css"; import "katex/dist/katex.min.css";
import ExcalidrawComponent from "../excalidraw/excalidraw"; import ExcalidrawComponent from "../excalidraw/excalidraw";
import { AttachedFileText } from "../chatInputArea/chatInputArea";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTrigger,
} from "@/components/ui/dialog";
import { DialogTitle } from "@radix-ui/react-dialog";
import { convertBytesToText } from "@/app/common/utils";
import { ScrollArea } from "@/components/ui/scroll-area";
import { getIconFromFileType } from "@/app/common/iconUtils";
const md = new markdownIt({ const md = new markdownIt({
html: true, html: true,
@ -149,6 +161,7 @@ export interface SingleChatMessage {
images?: string[]; images?: string[];
conversationId: string; conversationId: string;
turnId?: string; turnId?: string;
attachedFiles?: AttachedFileText[];
} }
export interface StreamMessage { export interface StreamMessage {
@ -165,6 +178,7 @@ export interface StreamMessage {
intentType?: string; intentType?: string;
inferredQueries?: string[]; inferredQueries?: string[];
turnId?: string; turnId?: string;
attachedFiles?: AttachedFileText[];
} }
export interface ChatHistoryData { export interface ChatHistoryData {
@ -398,7 +412,6 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
if (props.chatMessage.intent) { if (props.chatMessage.intent) {
const { type, "inferred-queries": inferredQueries } = props.chatMessage.intent; const { type, "inferred-queries": inferredQueries } = props.chatMessage.intent;
console.log("intent type", type);
if (type in intentTypeHandlers) { if (type in intentTypeHandlers) {
message = intentTypeHandlers[type as keyof typeof intentTypeHandlers](message); message = intentTypeHandlers[type as keyof typeof intentTypeHandlers](message);
} }
@ -695,6 +708,33 @@ 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.attachedFiles && props.chatMessage.attachedFiles.length > 0 && (
<div className="flex flex-wrap flex-col m-2">
{props.chatMessage.attachedFiles.map((file, index) => (
<Dialog key={index}>
<DialogTrigger>
<div className="flex items-center space-x-2 cursor-pointer bg-gray-500 bg-opacity-25 rounded-lg m-1 p-2 w-full">
{getIconFromFileType(file.file_type)}
<span className="truncate">{file.name}</span>
{file.size && (
<span className="text-gray-400">
({convertBytesToText(file.size)})
</span>
)}
</div>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{file.name}</DialogTitle>
</DialogHeader>
<DialogDescription>
<ScrollArea className="max-h-96">{file.content}</ScrollArea>
</DialogDescription>
</DialogContent>
</Dialog>
))}
</div>
)}
<div className={chatMessageWrapperClasses(props.chatMessage)}> <div className={chatMessageWrapperClasses(props.chatMessage)}>
<div <div
ref={messageRef} ref={messageRef}