Skip to content

Commit

Permalink
Refactor chat picker component, add model provider logos, introduce c…
Browse files Browse the repository at this point in the history
…hat templates, and implement chat settings UI
  • Loading branch information
eraykeskinmac committed Oct 30, 2024
1 parent 372a492 commit 35a5b93
Show file tree
Hide file tree
Showing 6 changed files with 213 additions and 1 deletion.
20 changes: 19 additions & 1 deletion app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import { supabase } from "@/lib/supabase";
import { useState } from "react";
import { useLocalStorage } from "usehooks-ts";
import modelsList from "@/lib/models.json";
import templates from "@/lib/templates";
import { ChatSettings } from "@/components/chat-settings";
import { LLMModelConfig } from "@/lib/models";

export default function Home() {
const [isAuthDialogOpen, setAuthDialog] = useState(false);
Expand All @@ -25,6 +28,10 @@ export default function Home() {
supabase ? supabase.auth.signOut() : console.warn("supabase not loaded");
}

function handleLanguageModelChange(e: LLMModelConfig) {
setLanguageModel({ ...languageModel, ...e });
}

return (
<main className="flex min-h-screen max-h-screen">
{supabase && (
Expand Down Expand Up @@ -55,7 +62,18 @@ export default function Home() {
isMultiModal={false}
stop={() => {}}
>
<ChatPicker models={modelsList.models} />
<ChatPicker
models={modelsList.models}
templates={templates as any}
selectedTemplate={selectedTemplate}
languageModel={languageModel}
/>
<ChatSettings
languageModel={languageModel}
onLanguageModelChange={handleLanguageModelChange}
apiKeyConfigurable={true}
baseURLConfigurable={true}
/>
</ChatInput>
</div>
</div>
Expand Down
118 changes: 118 additions & 0 deletions components/chat-settings.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
import { LLMModelConfig } from "@/lib/models";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "./ui/dropdown-menu";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "./ui/tooltip";
import { Button } from "./ui/button";
import { Settings2 } from "lucide-react";
import { Label } from "./ui/label";
import { Input } from "./ui/input";

export function ChatSettings({
apiKeyConfigurable,
baseURLConfigurable,
languageModel,
onLanguageModelChange,
}: {
apiKeyConfigurable: boolean;
baseURLConfigurable: boolean;
languageModel: LLMModelConfig;
onLanguageModelChange: (model: LLMModelConfig) => void;
}) {
return (
<DropdownMenu>
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger asChild>
<DropdownMenuTrigger asChild>
<Button
variant={"ghost"}
size={"icon"}
className="text-muted-foreground h-6 w-6 rounded-sm"
>
<Settings2 className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
</TooltipTrigger>
<TooltipContent>LLM Settings</TooltipContent>
</Tooltip>
</TooltipProvider>
<DropdownMenuContent align="start">
{apiKeyConfigurable && (
<>
<div className="flex flex-col gap-2">
<Label htmlFor="apiKey">API Key</Label>
<Input
name="apiKey"
type="password"
placeholder="Auto"
required={true}
defaultValue={languageModel.apiKey}
onChange={(e) =>
onLanguageModelChange({
apiKey:
e.target.value.length > 0 ? e.target.value : undefined,
})
}
className="text-sm"
/>
</div>
<DropdownMenuSeparator />
</>
)}
{baseURLConfigurable && (
<>
<div className="flex flex-col gap-2">
<Label htmlFor="baseURL">Base URL</Label>
<Input
name="baseURL"
type="text"
placeholder="Auto"
required={true}
defaultValue={languageModel.baseURL}
onChange={(e) =>
onLanguageModelChange({
baseURL:
e.target.value.length > 0 ? e.target.value : undefined,
})
}
className="text-sm"
/>
</div>
<DropdownMenuSeparator />
</>
)}
<div className="flex flex-col gap-1.5 px-2 py-2">
<span className="text-sm font-medium">Parameters</span>
</div>
<div className="flex space-x-4 items-center">
<span className="text-sm flex-1 text-muted-foreground">
Output Tokens
</span>
<Input
type="number"
defaultValue={languageModel.maxTokens}
min={50}
max={10000}
step={1}
className="h-6 rounded-sm w-[84px] text-xs text-center tabular-nums"
placeholder="Auto"
onChange={(e) =>
onLanguageModelChange({
maxTokens: parseInt(e.target.value) || undefined,
})
}
/>
</div>
</DropdownMenuContent>
</DropdownMenu>
);
}
25 changes: 25 additions & 0 deletions components/ui/input.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import * as React from "react"

import { cn } from "@/lib/utils"

export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = "Input"

export { Input }
26 changes: 26 additions & 0 deletions components/ui/label.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)

const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
24 changes: 24 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"@radix-ui/react-avatar": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.2",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.3",
Expand Down

0 comments on commit 35a5b93

Please sign in to comment.