klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-07 05:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into put-retrieved-context-in-separate-chatml-message

Browse Source
This commit is contained in:
Debanjum Singh Solanky
2024-10-23 12:55:18 -07:00
parent 3b978b9b67 9f2c02d9f7
commit bc059eeb0b
2 changed files with 32 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/interface/web/app/components/chatMessage/chatMessage.tsx
View File

@@ -327,6 +327,7 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
}, [messageRef.current]); }, [messageRef.current]);
useEffect(() => { useEffect(() => {
// Prepare initial message for rendering
let message = props.chatMessage.message; let message = props.chatMessage.message;
if (props.chatMessage.intent && props.chatMessage.intent.type == "excalidraw") { if (props.chatMessage.intent && props.chatMessage.intent.type == "excalidraw") {
@@ -341,29 +342,15 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
.replace(/\\\[/g, "LEFTBRACKET") .replace(/\\\[/g, "LEFTBRACKET")
.replace(/\\\]/g, "RIGHTBRACKET"); .replace(/\\\]/g, "RIGHTBRACKET");
if (props.chatMessage.images && props.chatMessage.images.length > 0) {
const imagesInMd = props.chatMessage.images
.map((image, index) => {
const decodedImage = image.startsWith("data%3Aimage")
? decodeURIComponent(image)
: image;
const sanitizedImage = DOMPurify.sanitize(decodedImage);
return `<div class="${styles.imageWrapper}"><img src="${sanitizedImage}" alt="uploaded image ${index + 1}" /></div>`;
})
.join("");
message = `<div class="${styles.imagesContainer}">${imagesInMd}</div>${message}`;
}
const intentTypeHandlers = { const intentTypeHandlers = {
"text-to-image": (msg: string) => `![generated image](data:image/png;base64,${msg})`, "text-to-image": (msg: string) => `![generated image](data:image/png;base64,${msg})`,
"text-to-image2": (msg: string) => `![generated image](${msg})`, "text-to-image2": (msg: string) => `![generated image](${msg})`,
"text-to-image-v3": (msg: string) => "text-to-image-v3": (msg: string) =>
`![generated image](data:image/webp;base64,${msg})`, `![generated image](data:image/webp;base64,${msg})`,
excalidraw: (msg: string) => { excalidraw: (msg: string) => msg,
return msg;
},
}; };
// Handle intent-specific rendering
if (props.chatMessage.intent) { if (props.chatMessage.intent) {
const { type, "inferred-queries": inferredQueries } = props.chatMessage.intent; const { type, "inferred-queries": inferredQueries } = props.chatMessage.intent;
@@ -376,11 +363,36 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
message += `\n\n${inferredQueries[0]}`; message += `\n\n${inferredQueries[0]}`;
} }
} }
// Handle user attached images rendering
let messageForClipboard = message;
let messageToRender = message;
if (props.chatMessage.images && props.chatMessage.images.length > 0) {
const sanitizedImages = props.chatMessage.images.map((image) => {
const decodedImage = image.startsWith("data%3Aimage")
? decodeURIComponent(image)
: image;
return DOMPurify.sanitize(decodedImage);
});
const imagesInMd = sanitizedImages
.map((sanitizedImage, index) => {
return `![uploaded image ${index + 1}](${sanitizedImage})`;
})
.join("\n");
const imagesInHtml = sanitizedImages
.map((sanitizedImage, index) => {
return `<div class="${styles.imageWrapper}"><img src="${sanitizedImage}" alt="uploaded image ${index + 1}" /></div>`;
})
.join("");
const userImagesInHtml = `<div class="${styles.imagesContainer}">${imagesInHtml}</div>`;
messageForClipboard = `${imagesInMd}\n\n${messageForClipboard}`;
messageToRender = `${userImagesInHtml}${messageToRender}`;
}
setTextRendered(message); // Set the message text
setTextRendered(messageForClipboard);
// Render the markdown // Render the markdown
let markdownRendered = md.render(message); let markdownRendered = md.render(messageToRender);
// Replace placeholders with LaTeX delimiters // Replace placeholders with LaTeX delimiters
markdownRendered = markdownRendered markdownRendered = markdownRendered

4
src/interface/web/app/page.tsx
View File

@@ -132,8 +132,8 @@ function ChatBodyData(props: ChatBodyDataProps) {
useEffect(() => { useEffect(() => {
const agents = (agentsData || []).filter((agent) => agent !== null && agent !== undefined); const agents = (agentsData || []).filter((agent) => agent !== null && agent !== undefined);
setAgents(agents); setAgents(agents);
// set the selected agent to the most recently used agent, first agent is always khoj // set the first agent, which is always the default agent, as the default for chat
setSelectedAgent(agents.length > 1 ? agents[1].slug : "khoj"); setSelectedAgent(agents.length > 1 ? agents[0].slug : "khoj");
// generate colored icons for the available agents // generate colored icons for the available agents
const agentIcons = agents.map((agent) => getIconFromIconName(agent.icon, agent.color)!); const agentIcons = agents.map((agent) => getIconFromIconName(agent.icon, agent.color)!);