klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 13:25:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

update looks & feel of chat side bar with model selector, checkboxes for tools, and actions (not yet implemented)

Browse Source
This commit is contained in:
sabaimran
2025-01-19 12:13:37 -08:00
parent 7837628bb3
commit f10b072634
4 changed files with 234 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/interface/web/app/common/modelSelector.tsx
View File

@@ -28,22 +28,29 @@ import { ModelOptions, useChatModelOptions } from "./auth";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"; import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
export function ModelSelector({ ...props }: PopoverProps) { interface ModelSelectorProps extends PopoverProps {
onSelect: (model: ModelOptions) => void;
selectedModel?: string;
disabled?: boolean;
}
export function ModelSelector({ ...props }: ModelSelectorProps) {
const [open, setOpen] = React.useState(false) const [open, setOpen] = React.useState(false)
const { models, isLoading, error } = useChatModelOptions(); const { models, isLoading, error } = useChatModelOptions();
const [peekedModel, setPeekedModel] = useState<ModelOptions | undefined>(undefined); const [peekedModel, setPeekedModel] = useState<ModelOptions | undefined>(undefined);
const [selectedModel, setSelectedModel] = useState<ModelOptions | undefined>(undefined); const [selectedModel, setSelectedModel] = useState<ModelOptions | undefined>(undefined);
useEffect(() => { useEffect(() => {
if (models && models.length > 0) { if (!models?.length) return;
setSelectedModel(models[0])
if (props.selectedModel) {
const model = models.find(model => model.name === props.selectedModel);
setSelectedModel(model || models[0]);
return;
} }
if (models && models.length > 0 && !selectedModel) { setSelectedModel(models[0]);
setSelectedModel(models[0]) }, [models, props.selectedModel]);
}
}, [models]);
if (isLoading) { if (isLoading) {
return ( return (
@@ -67,9 +74,10 @@ export function ModelSelector({ ...props }: PopoverProps) {
aria-expanded={open} aria-expanded={open}
aria-label="Select a model" aria-label="Select a model"
className="w-full justify-between text-left" className="w-full justify-between text-left"
disabled={props.disabled ?? false}
> >
<p className="truncate"> <p className="truncate">
{selectedModel ? selectedModel.name.substring(0,20) : "Select a model..."} {selectedModel ? selectedModel.name.substring(0, 20) : "Select a model..."}
</p> </p>
<CaretUpDown className="opacity-50" /> <CaretUpDown className="opacity-50" />
</Button> </Button>
@@ -157,7 +165,7 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
key={model.id} key={model.id}
onSelect={onSelect} onSelect={onSelect}
ref={ref} ref={ref}
className="data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground" className="data-[selected=true]:bg-muted data-[selected=true]:text-secondary-foreground"
> >
{model.name} {model.name}
<Check <Check

3
src/interface/web/app/components/agentCard/agentCard.tsx
View File

@@ -103,10 +103,13 @@ export interface AgentData {
privacy_level: string; privacy_level: string;
files?: string[]; files?: string[];
creator?: string; creator?: string;
is_creator?: boolean;
managed_by_admin: boolean; managed_by_admin: boolean;
chat_model: string; chat_model: string;
input_tools: string[]; input_tools: string[];
output_modes: string[]; output_modes: string[];
is_hidden: boolean;
has_files?: boolean;
} }
async function openChat(slug: string, userData: UserProfile | null) { async function openChat(slug: string, userData: UserProfile | null) {

4
src/interface/web/app/components/allConversations/allConversations.tsx
View File

@@ -363,7 +363,7 @@ export function FilesMenu(props: FilesMenuProps) {
<> <>
<Popover open={isOpen} onOpenChange={setIsOpen}> <Popover open={isOpen} onOpenChange={setIsOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<div className="w-auto bg-background border border-muted p-4 drop-shadow-sm rounded-2xl my-8"> <div className="w-auto bg-background border border-muted p-4 drop-shadow-sm rounded-2xl">
<div className="flex items-center justify-between space-x-4"> <div className="flex items-center justify-between space-x-4">
<h4 className="text-sm font-semibold"> <h4 className="text-sm font-semibold">
{usingConversationContext ? "Manage Context" : "Files"} {usingConversationContext ? "Manage Context" : "Files"}
@@ -424,7 +424,7 @@ function SessionsAndFiles(props: SessionsAndFilesProps) {
<ScrollArea> <ScrollArea>
<ScrollAreaScrollbar <ScrollAreaScrollbar
orientation="vertical" orientation="vertical"
className="h-full w-2.5 border-l border-l-transparent p-[1px]" className="h-full w-2.5"
/> />
<div className="p-0 m-0"> <div className="p-0 m-0">
{props.subsetOrganizedData != null && {props.subsetOrganizedData != null &&

282
src/interface/web/app/components/chatSidebar/chatSidebar.tsx
View File

@@ -1,21 +1,28 @@
"use client" "use client"
import * as React from "react" import { ArrowsDownUp, Bell, CaretCircleDown, Sparkle } from "@phosphor-icons/react";
import { Bell } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"; import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { ModelSelector } from "@/app/common/modelSelector"; import { ModelSelector } from "@/app/common/modelSelector";
import { FilesMenu } from "../allConversations/allConversations"; import { FilesMenu } from "../allConversations/allConversations";
import { AgentConfigurationOptions } from "@/app/agents/page"; import { AgentConfigurationOptions } from "@/app/agents/page";
import useSWR from "swr"; import useSWR from "swr";
import { Sheet, SheetContent } from "@/components/ui/sheet"; 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 { interface ChatSideBarProps {
preexistingAgent?: AgentData | null;
conversationId: string; conversationId: string;
isOpen: boolean; isOpen: boolean;
isMobileWidth?: boolean; isMobileWidth?: boolean;
@@ -47,13 +54,28 @@ export function ChatSidebar({ ...props }: ChatSideBarProps) {
function ChatSidebarInternal({ ...props }: ChatSideBarProps) { 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 } = const { data: agentConfigurationOptions, error: agentConfigurationOptionsError } =
useSWR<AgentConfigurationOptions>("/api/agents/options", fetcher); 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 ( return (
<Sidebar <Sidebar
collapsible="none" collapsible="none"
className={`ml-auto rounded-lg p-2 transition-all transform duration-300 ease-in-out className={`ml-auto opacity-30 rounded-lg p-2 transition-all transform duration-300 ease-in-out
${props.isOpen ${props.isOpen
? "translate-x-0 opacity-100 w-[300px]" ? "translate-x-0 opacity-100 w-[300px]"
: "translate-x-full opacity-0 w-0"} : "translate-x-full opacity-0 w-0"}
@@ -61,76 +83,148 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
variant="floating"> variant="floating">
<SidebarContent> <SidebarContent>
<SidebarHeader> <SidebarHeader>
Chat Options {
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> </SidebarHeader>
<SidebarGroup key={"test"} className="border-b last:border-none"> <SidebarGroup key={"knowledge"} className="border-b last:border-none">
<SidebarGroupContent className="gap-0"> <SidebarGroupContent className="gap-0">
<SidebarMenu className="p-0 m-0"> <SidebarMenu className="p-0 m-0">
<SidebarMenuItem key={"item4"} className="list-none"> {
<span>Custom Instructions</span> props.preexistingAgent && props.preexistingAgent.has_files ? (
<Textarea className="w-full h-32" /> <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> </SidebarMenuItem>
<SidebarMenuItem key={"item"} className="list-none"> </SidebarMenu>
<SidebarMenuButton> </SidebarGroupContent>
<Bell /> <span>Model</span> </SidebarGroup>
</SidebarMenuButton> <SidebarGroup key={"model"}>
<ModelSelector /> <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> </SidebarMenuItem>
<SidebarMenuItem key={"item1"} className="list-none"> </SidebarMenu>
<SidebarMenuButton> </SidebarGroupContent>
<Bell /> <span>Input Tools</span> </SidebarGroup>
</SidebarMenuButton> <Collapsible defaultOpen className="group/collapsible">
<DropdownMenu> <SidebarGroup>
<DropdownMenuTrigger asChild> <SidebarGroupLabel asChild>
<Button variant="outline">Input Tools</Button> <CollapsibleTrigger>
</DropdownMenuTrigger> Tools
<DropdownMenuContent className="w-56"> <CaretCircleDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
<DropdownMenuLabel>Input Tool Options</DropdownMenuLabel> </CollapsibleTrigger>
<DropdownMenuSeparator /> </SidebarGroupLabel>
{ <CollapsibleContent>
Object.entries(agentConfigurationOptions?.input_tools ?? {}).map(([key, value]) => { <SidebarGroupContent>
return ( {
<DropdownMenuCheckboxItem Object.entries(agentConfigurationOptions?.input_tools ?? {}).map(([key, value]) => {
checked={true} return (
onCheckedChange={() => { }} <Tooltip>
> <TooltipTrigger key={key} asChild>
{key} <div className="flex items-center space-x-2 py-1 justify-between">
</DropdownMenuCheckboxItem> <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>
</DropdownMenuContent> </Label>
</DropdownMenu> <Checkbox
</SidebarMenuItem> id={key}
<SidebarMenuItem key={"item2"} className="list-none"> className={`${isEditable ? "cursor-pointer" : ""}`}
<SidebarMenuButton> checked={isValueChecked(key, props.preexistingAgent?.input_tools)}
<Bell /> <span>Output Tools</span> onCheckedChange={() => { }}
</SidebarMenuButton> disabled={!isEditable}
<DropdownMenu> >
<DropdownMenuTrigger asChild> {key}
<Button variant="outline">Output Tools</Button> </Checkbox>
</DropdownMenuTrigger> </div>
<DropdownMenuContent className="w-56"> </TooltipTrigger>
<DropdownMenuLabel>Output Tool Options</DropdownMenuLabel> <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">
<DropdownMenuSeparator /> {value}
{ </TooltipContent>
Object.entries(agentConfigurationOptions?.output_modes ?? {}).map(([key, value]) => { </Tooltip>
return ( );
<DropdownMenuCheckboxItem }
checked={true} )
onCheckedChange={() => { }} }
> {
{key} Object.entries(agentConfigurationOptions?.output_modes ?? {}).map(([key, value]) => {
</DropdownMenuCheckboxItem> 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">
</DropdownMenuContent> {getIconForSlashCommand(key)}
</DropdownMenu> <p className="text-sm my-auto flex items-center">
</SidebarMenuItem> {key}
<SidebarMenuItem key={"item3"} className="list-none"> </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 <FilesMenu
conversationId={props.conversationId} conversationId={props.conversationId}
uploadedFiles={[]} uploadedFiles={[]}
@@ -141,6 +235,52 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
</SidebarGroupContent> </SidebarGroupContent>
</SidebarGroup> </SidebarGroup>
</SidebarContent> </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> </Sidebar>
) )
} }