mirror of
https://github.com/khoaliber/khoj.git
synced 2026-03-02 21:19:12 +00:00
update looks & feel of chat side bar with model selector, checkboxes for tools, and actions (not yet implemented)
This commit is contained in:
sabaimran
@@ -1,21 +1,28 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import { Bell } from "@phosphor-icons/react";
|
||||
import { ArrowsDownUp, Bell, CaretCircleDown, Sparkle } from "@phosphor-icons/react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
|
||||
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
||||
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;
|
||||
@@ -47,13 +54,28 @@ export function ChatSidebar({ ...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 } =
|
||||
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 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
|
||||
? "translate-x-0 opacity-100 w-[300px]"
|
||||
: "translate-x-full opacity-0 w-0"}
|
||||
@@ -61,76 +83,148 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
|
||||
variant="floating">
|
||||
<SidebarContent>
|
||||
<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>
|
||||
<SidebarGroup key={"test"} className="border-b last:border-none">
|
||||
<SidebarGroup key={"knowledge"} className="border-b last:border-none">
|
||||
<SidebarGroupContent className="gap-0">
|
||||
<SidebarMenu className="p-0 m-0">
|
||||
<SidebarMenuItem key={"item4"} className="list-none">
|
||||
<span>Custom Instructions</span>
|
||||
<Textarea className="w-full h-32" />
|
||||
{
|
||||
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>
|
||||
<SidebarMenuItem key={"item"} className="list-none">
|
||||
<SidebarMenuButton>
|
||||
<Bell /> <span>Model</span>
|
||||
</SidebarMenuButton>
|
||||
<ModelSelector />
|
||||
</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>
|
||||
<SidebarMenuItem key={"item1"} className="list-none">
|
||||
<SidebarMenuButton>
|
||||
<Bell /> <span>Input Tools</span>
|
||||
</SidebarMenuButton>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline">Input Tools</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56">
|
||||
<DropdownMenuLabel>Input Tool Options</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{
|
||||
Object.entries(agentConfigurationOptions?.input_tools ?? {}).map(([key, value]) => {
|
||||
return (
|
||||
<DropdownMenuCheckboxItem
|
||||
checked={true}
|
||||
onCheckedChange={() => { }}
|
||||
>
|
||||
{key}
|
||||
</DropdownMenuCheckboxItem>
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</SidebarMenuItem>
|
||||
<SidebarMenuItem key={"item2"} className="list-none">
|
||||
<SidebarMenuButton>
|
||||
<Bell /> <span>Output Tools</span>
|
||||
</SidebarMenuButton>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline">Output Tools</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56">
|
||||
<DropdownMenuLabel>Output Tool Options</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{
|
||||
Object.entries(agentConfigurationOptions?.output_modes ?? {}).map(([key, value]) => {
|
||||
return (
|
||||
<DropdownMenuCheckboxItem
|
||||
checked={true}
|
||||
onCheckedChange={() => { }}
|
||||
>
|
||||
{key}
|
||||
</DropdownMenuCheckboxItem>
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</SidebarMenuItem>
|
||||
<SidebarMenuItem key={"item3"} className="list-none">
|
||||
</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={[]}
|
||||
@@ -141,6 +235,52 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user