mirror of
https://github.com/khoaliber/khoj.git
synced 2026-03-02 21:19:12 +00:00
287 lines
16 KiB
TypeScript
287 lines
16 KiB
TypeScript
"use client"
|
|
|
|
import { ArrowsDownUp, Bell, CaretCircleDown, 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 { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
|
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 { Sheet, SheetContent } from "@/components/ui/sheet";
|
|
import { AgentData } from "../agentCard/agentCard";
|
|
import { 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";
|
|
|
|
interface ChatSideBarProps {
|
|
preexistingAgent?: AgentData | null;
|
|
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 (
|
|
<ChatSidebarInternal {...props} />
|
|
);
|
|
}
|
|
|
|
|
|
function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
|
|
const isEditable = props.preexistingAgent?.name.toLowerCase() === "khoj" || props.preexistingAgent?.is_hidden === true;
|
|
const isDefaultAgent = props.preexistingAgent?.name.toLowerCase() === "khoj";
|
|
const { data: agentConfigurationOptions, error: agentConfigurationOptionsError } =
|
|
useSWR<AgentConfigurationOptions>("/api/agents/options", fetcher);
|
|
|
|
const [customPrompt, setCustomPrompt] = useState<string | undefined>(!isDefaultAgent && props.preexistingAgent ? props.preexistingAgent.persona : "always respond in spanish");
|
|
const [selectedModel, setSelectedModel] = useState<string | undefined>(props.preexistingAgent?.chat_model);
|
|
const [inputTools, setInputTools] = useState<string[] | undefined>(props.preexistingAgent?.input_tools);
|
|
|
|
|
|
function isValueChecked(value: string, existingSelections: string[] | undefined): boolean {
|
|
if (existingSelections === undefined || existingSelections === null || existingSelections.length === 0) {
|
|
return true;
|
|
}
|
|
|
|
return existingSelections.includes(value);
|
|
}
|
|
|
|
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]"
|
|
: "translate-x-full opacity-0 w-0"}
|
|
`}
|
|
variant="floating">
|
|
<SidebarContent>
|
|
<SidebarHeader>
|
|
{
|
|
props.preexistingAgent && !isEditable ? (
|
|
<div className="flex items-center relative top-2">
|
|
<a className="text-lg font-bold flex flex-row items-center" href={`/agents?agent=${props.preexistingAgent.slug}`}>
|
|
{getIconFromIconName(props.preexistingAgent.icon, props.preexistingAgent.color)}
|
|
{props.preexistingAgent.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">
|
|
{
|
|
props.preexistingAgent && props.preexistingAgent.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) => setCustomPrompt(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}
|
|
onSelect={(model) => setSelectedModel(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>
|
|
{
|
|
Object.entries(agentConfigurationOptions?.input_tools ?? {}).map(([key, value]) => {
|
|
return (
|
|
<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, props.preexistingAgent?.input_tools)}
|
|
onCheckedChange={() => { }}
|
|
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>
|
|
);
|
|
}
|
|
)
|
|
}
|
|
{
|
|
Object.entries(agentConfigurationOptions?.output_modes ?? {}).map(([key, value]) => {
|
|
return (
|
|
<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, props.preexistingAgent?.output_modes)}
|
|
onCheckedChange={() => { }}
|
|
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>
|
|
);
|
|
}
|
|
)
|
|
}
|
|
</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>
|
|
<SidebarFooter key={"actions"}>
|
|
<SidebarMenu className="p-0 m-0">
|
|
|
|
{
|
|
(props.preexistingAgent && props.preexistingAgent.is_creator) ? (
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton asChild>
|
|
<Button
|
|
className="w-full"
|
|
variant={"ghost"}
|
|
onClick={() => window.location.href = `/agents?agent=${props.preexistingAgent?.slug}`}
|
|
>
|
|
Manage
|
|
</Button>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
) :
|
|
<>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton asChild>
|
|
<Button
|
|
className="w-full"
|
|
onClick={() => { }}
|
|
variant={"ghost"}
|
|
disabled={!isEditable}
|
|
>
|
|
Reset
|
|
</Button>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton asChild>
|
|
<Button
|
|
className="w-full"
|
|
variant={"secondary"}
|
|
onClick={() => { }}
|
|
disabled={!isEditable}
|
|
>
|
|
Save
|
|
</Button>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</>
|
|
}
|
|
</SidebarMenu>
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
)
|
|
}
|