mirror of
https://github.com/khoaliber/khoj.git
synced 2026-03-05 13:21:18 +00:00
Make most major changes for an updated chat UI (#843)
- Updated references panel - Use subtle coloring for chat cards - Chat streaming with train of thought - Side panel with limited sessions, expandable - Manage conversation file filters easily from the side panel - Updated nav menu, easily go to agents/automations/profile - Upload data from the chat UI (on click attachment icon) - Slash command pop-up menu, scrollable and selectable - Dark mode-enabled - Mostly mobile friendly
This commit is contained in:
sabaimran
@@ -1,31 +0,0 @@
|
||||
div.panel {
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
background-color: var(--calm-blue);
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
max-width: auto;
|
||||
}
|
||||
|
||||
div.panel a {
|
||||
color: var(--intense-green);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
div.onlineReference,
|
||||
div.contextReference {
|
||||
margin: 4px;
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
div.contextReference:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.singleReference {
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--frosted-background-color);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
'use client'
|
||||
|
||||
import styles from "./referencePanel.module.css";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ArrowRight, File } from "@phosphor-icons/react";
|
||||
|
||||
import markdownIt from "markdown-it";
|
||||
const md = new markdownIt({
|
||||
@@ -11,183 +11,329 @@ const md = new markdownIt({
|
||||
typographer: true
|
||||
});
|
||||
|
||||
import { SingleChatMessage, Context, WebPage, OnlineContextData } from "../chatMessage/chatMessage";
|
||||
import { Context, WebPage, OnlineContextData } from "../chatMessage/chatMessage";
|
||||
import { Card } from "@/components/ui/card";
|
||||
|
||||
interface ReferencePanelProps {
|
||||
referencePanelData: SingleChatMessage | null;
|
||||
setShowReferencePanel: (showReferencePanel: boolean) => void;
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from "@/components/ui/sheet";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import * as DomPurify from 'dompurify';
|
||||
|
||||
interface NotesContextReferenceData {
|
||||
title: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
export function hasValidReferences(referencePanelData: SingleChatMessage | null) {
|
||||
interface NotesContextReferenceCardProps extends NotesContextReferenceData {
|
||||
showFullContent: boolean;
|
||||
}
|
||||
|
||||
|
||||
function NotesContextReferenceCard(props: NotesContextReferenceCardProps) {
|
||||
const snippet = props.showFullContent ? DomPurify.sanitize(md.render(props.content)) : DomPurify.sanitize(props.content);
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
|
||||
return (
|
||||
referencePanelData &&
|
||||
(
|
||||
(referencePanelData.context && referencePanelData.context.length > 0) ||
|
||||
(referencePanelData.onlineContext && Object.keys(referencePanelData.onlineContext).length > 0 &&
|
||||
Object.values(referencePanelData.onlineContext).some(
|
||||
(onlineContextData) =>
|
||||
(onlineContextData.webpages && onlineContextData.webpages.length > 0)|| onlineContextData.answerBox || onlineContextData.peopleAlsoAsk || onlineContextData.knowledgeGraph))
|
||||
)
|
||||
);
|
||||
<>
|
||||
<Popover
|
||||
open={isHovering && !props.showFullContent}
|
||||
onOpenChange={setIsHovering}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Card
|
||||
onMouseEnter={() => setIsHovering(true)}
|
||||
onMouseLeave={() => setIsHovering(false)}
|
||||
className={`${props.showFullContent ? 'w-auto' : 'w-[200px]'} overflow-hidden break-words text-balance rounded-lg p-2 bg-muted border-none`}
|
||||
>
|
||||
<h3 className={`${props.showFullContent ? 'block' : 'line-clamp-1'} text-muted-foreground}`}>
|
||||
<File className='w-6 h-6 text-muted-foreground inline-flex' />
|
||||
{props.title}
|
||||
</h3>
|
||||
<p className={`${props.showFullContent ? 'block' : 'overflow-hidden line-clamp-2'}`} dangerouslySetInnerHTML={{ __html: snippet }}></p>
|
||||
</Card>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-[400px] mx-2">
|
||||
<Card className={`w-auto overflow-hidden break-words text-balance rounded-lg p-2 border-none`}>
|
||||
<h3 className={`line-clamp-2 text-muted-foreground}`}>
|
||||
<File className='w-6 h-6 text-muted-foreground inline-flex' />
|
||||
{props.title}
|
||||
</h3>
|
||||
<p className={`overflow-hidden line-clamp-3`} dangerouslySetInnerHTML={{ __html: snippet }}></p>
|
||||
</Card>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function CompiledReference(props: { context: (Context | string) }) {
|
||||
export interface ReferencePanelData {
|
||||
notesReferenceCardData: NotesContextReferenceData[];
|
||||
onlineReferenceCardData: OnlineReferenceData[];
|
||||
}
|
||||
|
||||
let snippet = "";
|
||||
let file = "";
|
||||
if (typeof props.context === "string") {
|
||||
// Treat context as a string and get the first line for the file name
|
||||
const lines = props.context.split("\n");
|
||||
file = lines[0];
|
||||
snippet = lines.slice(1).join("\n");
|
||||
} else {
|
||||
const context = props.context as Context;
|
||||
snippet = context.compiled;
|
||||
file = context.file;
|
||||
|
||||
interface OnlineReferenceData {
|
||||
title: string;
|
||||
description: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
interface OnlineReferenceCardProps extends OnlineReferenceData {
|
||||
showFullContent: boolean;
|
||||
}
|
||||
|
||||
function GenericOnlineReferenceCard(props: OnlineReferenceCardProps) {
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
|
||||
if (!props.link) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [showSnippet, setShowSnippet] = useState(false);
|
||||
const domain = new URL(props.link).hostname;
|
||||
const favicon = `https://www.google.com/s2/favicons?domain=${domain}`;
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
setIsHovering(true);
|
||||
}
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
setIsHovering(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.singleReference}>
|
||||
<div className={styles.contextReference} onClick={() => setShowSnippet(!showSnippet)}>
|
||||
<div className={styles.referencePanelTitle}>
|
||||
{file}
|
||||
</div>
|
||||
<div className={styles.referencePanelContent} style={{ display: showSnippet ? "block" : "none" }}>
|
||||
<div>
|
||||
{snippet}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<>
|
||||
<Popover
|
||||
open={isHovering && !props.showFullContent}
|
||||
onOpenChange={setIsHovering}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Card
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
className={`${props.showFullContent ? 'w-auto' : 'w-[200px]'} overflow-hidden break-words rounded-lg text-balance p-2 bg-muted border-none`}>
|
||||
|
||||
function WebPageReference(props: { webpages: WebPage, query: string | null }) {
|
||||
|
||||
let snippet = md.render(props.webpages.snippet);
|
||||
|
||||
const [showSnippet, setShowSnippet] = useState(false);
|
||||
|
||||
return (
|
||||
<div className={styles.onlineReference} onClick={() => setShowSnippet(!showSnippet)}>
|
||||
<div className={styles.onlineReferenceTitle}>
|
||||
<a href={props.webpages.link} target="_blank" rel="noreferrer">
|
||||
{
|
||||
props.query ? (
|
||||
<span>
|
||||
{props.query}
|
||||
</span>
|
||||
) : <span>
|
||||
{props.webpages.query}
|
||||
</span>
|
||||
}
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.onlineReferenceContent} style={{ display: showSnippet ? "block" : "none" }}>
|
||||
<div dangerouslySetInnerHTML={{ __html: snippet }}></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function OnlineReferences(props: { onlineContext: OnlineContextData, query: string}) {
|
||||
|
||||
const webpages = props.onlineContext.webpages;
|
||||
const answerBox = props.onlineContext.answerBox;
|
||||
const peopleAlsoAsk = props.onlineContext.peopleAlsoAsk;
|
||||
const knowledgeGraph = props.onlineContext.knowledgeGraph;
|
||||
|
||||
return (
|
||||
<div className={styles.singleReference}>
|
||||
{
|
||||
webpages && (
|
||||
!Array.isArray(webpages) ? (
|
||||
<WebPageReference webpages={webpages} query={props.query} />
|
||||
) : (
|
||||
webpages.map((webpage, index) => {
|
||||
return <WebPageReference webpages={webpage} key={index} query={null} />
|
||||
})
|
||||
)
|
||||
)
|
||||
}
|
||||
{
|
||||
answerBox && (
|
||||
<div className={styles.onlineReference}>
|
||||
<div className={styles.onlineReferenceTitle}>
|
||||
{answerBox.title}
|
||||
</div>
|
||||
<div className={styles.onlineReferenceContent}>
|
||||
<div>
|
||||
{answerBox.answer}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
peopleAlsoAsk && peopleAlsoAsk.map((people, index) => {
|
||||
return (
|
||||
<div className={styles.onlineReference} key={index}>
|
||||
<div className={styles.onlineReferenceTitle}>
|
||||
<a href={people.link} target="_blank" rel="noreferrer">
|
||||
{people.question}
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.onlineReferenceContent}>
|
||||
<div>
|
||||
{people.snippet}
|
||||
<div className='flex flex-col'>
|
||||
<a href={props.link} target="_blank" rel="noreferrer" className='!no-underline p-2'>
|
||||
<div className='flex items-center'>
|
||||
<img src={favicon} alt="" className='!w-4 h-4 mr-2' />
|
||||
<h3 className={`overflow-hidden ${props.showFullContent ? 'block' : 'line-clamp-1'} text-muted-foreground`}>{domain}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
{
|
||||
knowledgeGraph && (
|
||||
<div className={styles.onlineReference}>
|
||||
<div className={styles.onlineReferenceTitle}>
|
||||
<a href={knowledgeGraph.descriptionLink} target="_blank" rel="noreferrer">
|
||||
{knowledgeGraph.title}
|
||||
<h3 className={`overflow-hidden ${props.showFullContent ? 'block' : 'line-clamp-1'} font-bold`}>{props.title}</h3>
|
||||
<p className={`overflow-hidden ${props.showFullContent ? 'block' : 'line-clamp-2'}`}>{props.description}</p>
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.onlineReferenceContent}>
|
||||
<div>
|
||||
{knowledgeGraph.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</Card>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-[400px] mx-2">
|
||||
<Card
|
||||
className={`w-auto overflow-hidden break-words text-balance rounded-lg border-none`}>
|
||||
|
||||
<div className='flex flex-col'>
|
||||
<a href={props.link} target="_blank" rel="noreferrer" className='!no-underline p-2'>
|
||||
<div className='flex items-center'>
|
||||
<img src={favicon} alt="" className='!w-4 h-4 mr-2' />
|
||||
<h3 className={`overflow-hidden ${props.showFullContent ? 'block' : 'line-clamp-2'} text-muted-foreground`}>{domain}</h3>
|
||||
</div>
|
||||
<h3 className={`overflow-hidden ${props.showFullContent ? 'block' : 'line-clamp-2'} font-bold`}>{props.title}</h3>
|
||||
<p className={`overflow-hidden ${props.showFullContent ? 'block' : 'line-clamp-3'}`}>{props.description}</p>
|
||||
</a>
|
||||
</div>
|
||||
</Card>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ReferencePanel(props: ReferencePanelProps) {
|
||||
export function constructAllReferences(contextData: Context[], onlineData: { [key: string]: OnlineContextData }) {
|
||||
|
||||
if (!props.referencePanelData) {
|
||||
return null;
|
||||
const onlineReferences: OnlineReferenceData[] = [];
|
||||
const contextReferences: NotesContextReferenceData[] = [];
|
||||
|
||||
if (onlineData) {
|
||||
let localOnlineReferences = [];
|
||||
for (const [key, value] of Object.entries(onlineData)) {
|
||||
if (value.answerBox) {
|
||||
localOnlineReferences.push({
|
||||
title: value.answerBox.title,
|
||||
description: value.answerBox.answer,
|
||||
link: value.answerBox.source
|
||||
});
|
||||
}
|
||||
if (value.knowledgeGraph) {
|
||||
localOnlineReferences.push({
|
||||
title: value.knowledgeGraph.title,
|
||||
description: value.knowledgeGraph.description,
|
||||
link: value.knowledgeGraph.descriptionLink
|
||||
});
|
||||
}
|
||||
|
||||
if (value.webpages) {
|
||||
// If webpages is of type Array, iterate through it and add each webpage to the localOnlineReferences array
|
||||
if (value.webpages instanceof Array) {
|
||||
let webPageResults = value.webpages.map((webPage) => {
|
||||
return {
|
||||
title: webPage.query,
|
||||
description: webPage.snippet,
|
||||
link: webPage.link
|
||||
}
|
||||
});
|
||||
localOnlineReferences.push(...webPageResults);
|
||||
} else {
|
||||
let singleWebpage = value.webpages as WebPage;
|
||||
|
||||
// If webpages is an object, add the object to the localOnlineReferences array
|
||||
localOnlineReferences.push({
|
||||
title: singleWebpage.query,
|
||||
description: singleWebpage.snippet,
|
||||
link: singleWebpage.link
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (value.organic) {
|
||||
let organicResults = value.organic.map((organicContext) => {
|
||||
return {
|
||||
title: organicContext.title,
|
||||
description: organicContext.snippet,
|
||||
link: organicContext.link
|
||||
}
|
||||
});
|
||||
|
||||
localOnlineReferences.push(...organicResults);
|
||||
}
|
||||
}
|
||||
|
||||
onlineReferences.push(...localOnlineReferences);
|
||||
}
|
||||
|
||||
if (!hasValidReferences(props.referencePanelData)) {
|
||||
return null;
|
||||
if (contextData) {
|
||||
|
||||
let localContextReferences = contextData.map((context) => {
|
||||
if (!context.compiled) {
|
||||
const fileContent = context as unknown as string;
|
||||
const title = fileContent.split('\n')[0];
|
||||
const content = fileContent.split('\n').slice(1).join('\n');
|
||||
return {
|
||||
title: title,
|
||||
content: content
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: context.file,
|
||||
content: context.compiled
|
||||
}
|
||||
});
|
||||
|
||||
contextReferences.push(...localContextReferences);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${styles.panel}`}>
|
||||
References <button onClick={() => props.setShowReferencePanel(false)}>Hide</button>
|
||||
{
|
||||
props.referencePanelData?.context.map((context, index) => {
|
||||
return <CompiledReference context={context} key={index} />
|
||||
})
|
||||
}
|
||||
{
|
||||
Object.entries(props.referencePanelData?.onlineContext || {}).map(([key, onlineContextData], index) => {
|
||||
return <OnlineReferences onlineContext={onlineContextData} query={key} key={index} />
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
return {
|
||||
notesReferenceCardData: contextReferences,
|
||||
onlineReferenceCardData: onlineReferences
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export interface TeaserReferenceSectionProps {
|
||||
notesReferenceCardData: NotesContextReferenceData[];
|
||||
onlineReferenceCardData: OnlineReferenceData[];
|
||||
isMobileWidth: boolean;
|
||||
}
|
||||
|
||||
export function TeaserReferencesSection(props: TeaserReferenceSectionProps) {
|
||||
const [numTeaserSlots, setNumTeaserSlots] = useState(3);
|
||||
|
||||
useEffect(() => {
|
||||
setNumTeaserSlots(props.isMobileWidth ? 1 : 3);
|
||||
}, [props.isMobileWidth]);
|
||||
|
||||
const notesDataToShow = props.notesReferenceCardData.slice(0, numTeaserSlots);
|
||||
const onlineDataToShow = notesDataToShow.length < numTeaserSlots ? props.onlineReferenceCardData.slice(0, numTeaserSlots - notesDataToShow.length) : [];
|
||||
|
||||
const shouldShowShowMoreButton = props.notesReferenceCardData.length > 0 || props.onlineReferenceCardData.length > 0;
|
||||
|
||||
const numReferences = props.notesReferenceCardData.length + props.onlineReferenceCardData.length;
|
||||
|
||||
if (numReferences === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${props.isMobileWidth ? 'p-0' : 'p-4'}`}>
|
||||
<h3 className="inline-flex items-center">
|
||||
References
|
||||
<p className="text-gray-400 m-2">
|
||||
{numReferences} sources
|
||||
</p>
|
||||
</h3>
|
||||
<div className={`flex ${props.isMobileWidth ? 'w-[90vw]' : 'w-auto'} space-x-4 mt-2`}>
|
||||
{
|
||||
notesDataToShow.map((note, index) => {
|
||||
return <NotesContextReferenceCard showFullContent={false} {...note} key={`${note.title}-${index}`} />
|
||||
})
|
||||
}
|
||||
{
|
||||
onlineDataToShow.map((online, index) => {
|
||||
return <GenericOnlineReferenceCard showFullContent={false} {...online} key={`${online.title}-${index}`} />
|
||||
})
|
||||
}
|
||||
{
|
||||
shouldShowShowMoreButton &&
|
||||
<ReferencePanel
|
||||
notesReferenceCardData={props.notesReferenceCardData}
|
||||
onlineReferenceCardData={props.onlineReferenceCardData} />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
interface ReferencePanelDataProps {
|
||||
notesReferenceCardData: NotesContextReferenceData[];
|
||||
onlineReferenceCardData: OnlineReferenceData[];
|
||||
}
|
||||
|
||||
export default function ReferencePanel(props: ReferencePanelDataProps) {
|
||||
|
||||
if (!props.notesReferenceCardData && !props.onlineReferenceCardData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Sheet>
|
||||
<SheetTrigger
|
||||
className='text-balance w-[200px] overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle justify-center items-center !m-0 inline-flex'>
|
||||
View references <ArrowRight className='m-1' />
|
||||
</SheetTrigger>
|
||||
<SheetContent className="overflow-y-scroll">
|
||||
<SheetHeader>
|
||||
<SheetTitle>References</SheetTitle>
|
||||
<SheetDescription>View all references for this response</SheetDescription>
|
||||
</SheetHeader>
|
||||
<div className="flex flex-col w-auto gap-2 mt-2">
|
||||
{
|
||||
props.notesReferenceCardData.map((note, index) => {
|
||||
return <NotesContextReferenceCard showFullContent={true} {...note} key={`${note.title}-${index}`} />
|
||||
})
|
||||
}
|
||||
{
|
||||
props.onlineReferenceCardData.map((online, index) => {
|
||||
return <GenericOnlineReferenceCard showFullContent={true} {...online} key={`${online.title}-${index}`} />
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user