mirror of
https://github.com/khoaliber/khoj.git
synced 2026-03-02 21:19:12 +00:00
420 lines
22 KiB
TypeScript
420 lines
22 KiB
TypeScript
"use client"
|
|
|
|
import { ArrowsDownUp, CaretCircleDown, CircleNotch, Sparkle } from "@phosphor-icons/react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { ModelSelector } from "@/app/common/modelSelector";
|
|
import { FilesMenu } from "../allConversations/allConversations";
|
|
import { AgentConfigurationOptions } from "@/app/agents/page";
|
|
import useSWR from "swr";
|
|
import { mutate } from "swr";
|
|
import { Sheet, SheetContent } from "@/components/ui/sheet";
|
|
import { AgentData } from "../agentCard/agentCard";
|
|
import { useEffect, useState } from "react";
|
|
import { getIconForSlashCommand, getIconFromIconName } from "@/app/common/iconUtils";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip";
|
|
import { TooltipContent } from "@radix-ui/react-tooltip";
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
|
import { useAuthenticatedData } from "@/app/common/auth";
|
|
|
|
interface ChatSideBarProps {
|
|
conversationId: string;
|
|
isOpen: boolean;
|
|
isMobileWidth?: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
}
|
|
|
|
const fetcher = (url: string) => fetch(url).then((res) => res.json());
|
|
|
|
export function ChatSidebar({ ...props }: ChatSideBarProps) {
|
|
|
|
if (props.isMobileWidth) {
|
|
return (
|
|
<Sheet
|
|
open={props.isOpen}
|
|
onOpenChange={props.onOpenChange}>
|
|
<SheetContent
|
|
className="w-[300px] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
|
|
>
|
|
<ChatSidebarInternal {...props} />
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="relative">
|
|
<ChatSidebarInternal {...props} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
|
|
const [isEditable, setIsEditable] = useState<boolean>(false);
|
|
const [isDefaultAgent, setIsDefaultAgent] = useState<boolean>(false);
|
|
const { data: agentConfigurationOptions, error: agentConfigurationOptionsError } =
|
|
useSWR<AgentConfigurationOptions>("/api/agents/options", fetcher);
|
|
|
|
const { data: agentData, error: agentDataError } = useSWR<AgentData>(`/api/agents/conversation?conversation_id=${props.conversationId}`, fetcher);
|
|
const {
|
|
data: authenticatedData,
|
|
error: authenticationError,
|
|
isLoading: authenticationLoading,
|
|
} = useAuthenticatedData();
|
|
|
|
const [customPrompt, setCustomPrompt] = useState<string | undefined>("");
|
|
const [selectedModel, setSelectedModel] = useState<string | undefined>();
|
|
const [inputTools, setInputTools] = useState<string[] | undefined>();
|
|
const [outputModes, setOutputModes] = useState<string[] | undefined>();
|
|
const [hasModified, setHasModified] = useState<boolean>(false);
|
|
|
|
const [isSaving, setIsSaving] = useState<boolean>(false);
|
|
|
|
function setupAgentData() {
|
|
if (agentData) {
|
|
setSelectedModel(agentData.chat_model);
|
|
setInputTools(agentData.input_tools);
|
|
if (agentData.input_tools === undefined || agentData.input_tools.length === 0) {
|
|
setInputTools(agentConfigurationOptions?.input_tools ? Object.keys(agentConfigurationOptions.input_tools) : []);
|
|
}
|
|
setOutputModes(agentData.output_modes);
|
|
if (agentData.output_modes === undefined || agentData.output_modes.length === 0) {
|
|
setOutputModes(agentConfigurationOptions?.output_modes ? Object.keys(agentConfigurationOptions.output_modes) : []);
|
|
}
|
|
|
|
if (agentData.name.toLowerCase() === "khoj" || agentData.is_hidden === true) {
|
|
setIsEditable(true);
|
|
}
|
|
|
|
if (agentData.slug.toLowerCase() === "khoj") {
|
|
setIsDefaultAgent(true);
|
|
} else {
|
|
setCustomPrompt(agentData.persona);
|
|
}
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
setupAgentData();
|
|
}, [agentData]);
|
|
|
|
|
|
function isValueChecked(value: string, existingSelections: string[]): boolean {
|
|
return existingSelections.includes(value);
|
|
}
|
|
|
|
function handleCheckToggle(value: string, existingSelections: string[]): string[] {
|
|
setHasModified(true);
|
|
|
|
if (existingSelections.includes(value)) {
|
|
return existingSelections.filter((v) => v !== value);
|
|
}
|
|
|
|
return [...existingSelections, value];
|
|
}
|
|
|
|
function handleCustomPromptChange(value: string) {
|
|
setCustomPrompt(value);
|
|
setHasModified(true);
|
|
}
|
|
|
|
function handleSave() {
|
|
if (hasModified) {
|
|
if (!isDefaultAgent && agentData?.is_hidden === false) {
|
|
alert("This agent is not a hidden agent. It cannot be modified from this interface.");
|
|
return;
|
|
}
|
|
|
|
let mode = "PATCH";
|
|
|
|
if (isDefaultAgent) {
|
|
mode = "POST";
|
|
}
|
|
|
|
const data = {
|
|
persona: customPrompt,
|
|
chat_model: selectedModel,
|
|
input_tools: inputTools,
|
|
output_modes: outputModes,
|
|
...(isDefaultAgent ? {} : { slug: agentData?.slug })
|
|
};
|
|
|
|
setIsSaving(true);
|
|
|
|
const url = !isDefaultAgent ? `/api/agents/hidden` : `/api/agents/hidden?conversation_id=${props.conversationId}`;
|
|
|
|
// There are four scenarios here.
|
|
// 1. If the agent is a default agent, then we need to create a new agent just to associate with this conversation.
|
|
// 2. If the agent is not a default agent, then we need to update the existing hidden agent. This will be associated using the `slug` field.
|
|
// 3. If the agent is a "proper" agent and not a hidden agent, then it cannot be updated from this API.
|
|
// 4. The API is being called before the new conversation has been provisioned. If this happens, then create the agent and associate it with the conversation. Reroute the user to the new conversation page.
|
|
fetch(url, {
|
|
method: mode,
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
.then((res) => {
|
|
setIsSaving(false);
|
|
res.json()
|
|
})
|
|
.then((data) => {
|
|
mutate(`/api/agents/conversation?conversation_id=${props.conversationId}`);
|
|
setHasModified(false);
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error:", error);
|
|
setIsSaving(false);
|
|
});
|
|
}
|
|
}
|
|
|
|
function handleReset() {
|
|
setupAgentData();
|
|
setHasModified(false);
|
|
}
|
|
|
|
function handleModelSelect(model: string) {
|
|
setSelectedModel(model);
|
|
setHasModified(true);
|
|
}
|
|
|
|
return (
|
|
<Sidebar
|
|
collapsible="none"
|
|
className={`ml-auto opacity-30 rounded-lg p-2 transition-all transform duration-300 ease-in-out
|
|
${props.isOpen
|
|
? "translate-x-0 opacity-100 w-[300px] relative"
|
|
: "translate-x-full opacity-100 w-0 p-0 m-0"}
|
|
`}
|
|
variant="floating">
|
|
<SidebarContent>
|
|
<SidebarHeader>
|
|
{
|
|
agentData && !isEditable ? (
|
|
<div className="flex items-center relative top-2">
|
|
<a className="text-lg font-bold flex flex-row items-center" href={`/agents?agent=${agentData.slug}`}>
|
|
{getIconFromIconName(agentData.icon, agentData.color)}
|
|
{agentData.name}
|
|
</a>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center relative top-2">
|
|
{getIconFromIconName("lightbulb", "orange")}
|
|
Chat Options
|
|
</div>
|
|
)
|
|
}
|
|
</SidebarHeader>
|
|
<SidebarGroup key={"knowledge"} className="border-b last:border-none">
|
|
<SidebarGroupContent className="gap-0">
|
|
<SidebarMenu className="p-0 m-0">
|
|
{
|
|
agentData && agentData.has_files ? (
|
|
<SidebarMenuItem key={"agent_knowledge"} className="list-none">
|
|
<div className="flex items-center space-x-2 rounded-full">
|
|
<div className="text-muted-foreground"><Sparkle /></div>
|
|
<div className="text-muted-foreground text-sm">Using custom knowledge base</div>
|
|
</div>
|
|
</SidebarMenuItem>
|
|
) : null
|
|
}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
<SidebarGroup key={"instructions"}>
|
|
<SidebarGroupContent>
|
|
<SidebarGroupLabel>Custom Instructions</SidebarGroupLabel>
|
|
<SidebarMenu className="p-0 m-0">
|
|
<SidebarMenuItem className="list-none">
|
|
<Textarea
|
|
className="w-full h-32"
|
|
value={customPrompt}
|
|
onChange={(e) => handleCustomPromptChange(e.target.value)}
|
|
readOnly={!isEditable}
|
|
disabled={!isEditable} />
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
<SidebarGroup key={"model"}>
|
|
<SidebarGroupContent>
|
|
<SidebarGroupLabel>Model</SidebarGroupLabel>
|
|
<SidebarMenu className="p-0 m-0">
|
|
<SidebarMenuItem key={"model"} className="list-none">
|
|
<ModelSelector
|
|
disabled={!isEditable || !authenticatedData?.is_active}
|
|
onSelect={(model) => handleModelSelect(model.name)}
|
|
selectedModel={selectedModel}
|
|
/>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
<Collapsible defaultOpen className="group/collapsible">
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel asChild>
|
|
<CollapsibleTrigger>
|
|
Tools
|
|
<CaretCircleDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
|
|
</CollapsibleTrigger>
|
|
</SidebarGroupLabel>
|
|
<CollapsibleContent>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu className="p-1 m-0">
|
|
{
|
|
Object.entries(agentConfigurationOptions?.input_tools ?? {}).map(([key, value]) => {
|
|
return (
|
|
<SidebarMenuItem key={key} className="list-none">
|
|
<Tooltip>
|
|
<TooltipTrigger key={key} asChild>
|
|
<div className="flex items-center space-x-2 py-1 justify-between">
|
|
<Label htmlFor={key} className="flex items-center gap-2 text-accent-foreground p-1 cursor-pointer">
|
|
{getIconForSlashCommand(key)}
|
|
<p className="text-sm my-auto flex items-center">
|
|
{key}
|
|
</p>
|
|
</Label>
|
|
<Checkbox
|
|
id={key}
|
|
className={`${isEditable ? "cursor-pointer" : ""}`}
|
|
checked={isValueChecked(key, inputTools ?? [])}
|
|
onCheckedChange={() => setInputTools(handleCheckToggle(key, inputTools ?? []))}
|
|
disabled={!isEditable}
|
|
>
|
|
{key}
|
|
</Checkbox>
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent sideOffset={5} side="left" align="start" className="text-sm bg-background text-foreground shadow-sm border border-slate-500 border-opacity-20 p-2 rounded-lg">
|
|
{value}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</SidebarMenuItem>
|
|
);
|
|
}
|
|
)
|
|
}
|
|
{
|
|
Object.entries(agentConfigurationOptions?.output_modes ?? {}).map(([key, value]) => {
|
|
return (
|
|
<SidebarMenuItem key={key} className="list-none">
|
|
<Tooltip>
|
|
<TooltipTrigger key={key} asChild>
|
|
<div className="flex items-center space-x-2 py-1 justify-between">
|
|
<Label htmlFor={key} className="flex items-center gap-2 p-1 rounded-lg cursor-pointer">
|
|
{getIconForSlashCommand(key)}
|
|
<p className="text-sm my-auto flex items-center">
|
|
{key}
|
|
</p>
|
|
</Label>
|
|
<Checkbox
|
|
id={key}
|
|
className={`${isEditable ? "cursor-pointer" : ""}`}
|
|
checked={isValueChecked(key, outputModes ?? [])}
|
|
onCheckedChange={() => setOutputModes(handleCheckToggle(key, outputModes ?? []))}
|
|
disabled={!isEditable}
|
|
>
|
|
{key}
|
|
</Checkbox>
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent sideOffset={5} side="left" align="start" className="text-sm bg-background text-foreground shadow-sm border border-slate-500 border-opacity-20 p-2 rounded-lg">
|
|
{value}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</SidebarMenuItem>
|
|
);
|
|
}
|
|
)
|
|
}
|
|
</SidebarMenu>
|
|
|
|
</SidebarGroupContent>
|
|
</CollapsibleContent>
|
|
</SidebarGroup>
|
|
</Collapsible>
|
|
<SidebarGroup key={"files"}>
|
|
<SidebarGroupContent>
|
|
<SidebarGroupLabel>Files</SidebarGroupLabel>
|
|
<SidebarMenu className="p-0 m-0">
|
|
<SidebarMenuItem key={"files-conversation"} className="list-none">
|
|
<FilesMenu
|
|
conversationId={props.conversationId}
|
|
uploadedFiles={[]}
|
|
isMobileWidth={props.isMobileWidth ?? false}
|
|
/>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
{
|
|
props.isOpen && (
|
|
<SidebarFooter key={"actions"}>
|
|
<SidebarMenu className="p-0 m-0">
|
|
|
|
{
|
|
(agentData && !isEditable && agentData.is_creator) ? (
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton asChild>
|
|
<Button
|
|
className="w-full"
|
|
variant={"ghost"}
|
|
onClick={() => window.location.href = `/agents?agent=${agentData?.slug}`}
|
|
>
|
|
Manage
|
|
</Button>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
) :
|
|
<>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton asChild>
|
|
<Button
|
|
className="w-full"
|
|
onClick={() => handleReset()}
|
|
variant={"ghost"}
|
|
disabled={!isEditable || !hasModified}
|
|
>
|
|
Reset
|
|
</Button>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton asChild>
|
|
<Button
|
|
className="w-full"
|
|
variant={"secondary"}
|
|
onClick={() => handleSave()}
|
|
disabled={!isEditable || !hasModified || isSaving}
|
|
>
|
|
{
|
|
isSaving ?
|
|
<CircleNotch className="animate-spin" />
|
|
:
|
|
<ArrowsDownUp />
|
|
}
|
|
{
|
|
isSaving ? "Saving" : "Save"
|
|
}
|
|
</Button>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</>
|
|
}
|
|
</SidebarMenu>
|
|
</SidebarFooter>
|
|
)
|
|
}
|
|
</Sidebar>
|
|
)
|
|
}
|