mirror of
https://github.com/khoj-ai/khoj.git
synced 2025-02-17 08:04:21 +00:00
Use Dropdown component for model options. Make cards more responsive
- Ensure model name doesn't stretch or shrink dropdown width from parent card width - Ensure buttons flex wrap on smaller displays
This commit is contained in:
Debanjum Singh Solanky
parent
ade2f6f5d1
commit
a5a06da3fc
1 changed files with 102 additions and 49 deletions
|
|
@ -4,7 +4,7 @@ import styles from "./settings.module.css";
|
|||
|
||||
import { Suspense, useEffect, useState } from "react";
|
||||
|
||||
import { useUserConfig } from "../common/auth";
|
||||
import { useUserConfig, ModelOptions } from "../common/auth";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
|
|
@ -12,31 +12,50 @@ import {
|
|||
CardFooter,
|
||||
CardHeader,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
|
||||
import { ArrowRight } from "@phosphor-icons/react";
|
||||
|
||||
import NavMenu from "../components/navMenu/navMenu";
|
||||
import SidePanel from "../components/sidePanel/chatHistorySidePanel";
|
||||
import Loading from "../components/loading/loading";
|
||||
import { ArrowRight } from "@phosphor-icons/react";
|
||||
|
||||
|
||||
interface CardComponentProps {
|
||||
header: string;
|
||||
children: React.ReactNode;
|
||||
footer: React.ReactNode;
|
||||
interface DropdownComponentProps {
|
||||
items: ModelOptions[];
|
||||
selected: number;
|
||||
}
|
||||
|
||||
const CardComponent: React.FC<CardComponentProps> = ({ header, children, footer }) => {
|
||||
return (
|
||||
<Card className="w-1/3 grid grid-flow-column border border-gray-300 shadow-md rounded-lg">
|
||||
<CardHeader className="text-xl">{header}</CardHeader>
|
||||
<CardContent>
|
||||
{children}
|
||||
</CardContent>
|
||||
<CardFooter className="flex gap-4">
|
||||
{footer}
|
||||
</CardFooter>
|
||||
</Card>
|
||||
const DropdownComponent: React.FC<DropdownComponentProps> = ({items, selected}) => {
|
||||
const [position, setPosition] = useState(selected?.toString() ?? "0");
|
||||
|
||||
return !!selected && (
|
||||
<div className="overflow-hidden">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild className="w-full">
|
||||
<Button variant="outline" className="justify-start">
|
||||
{items.find(item => item.id === Number(position))?.name}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuRadioGroup value={position.toString()} onValueChange={setPosition}>
|
||||
{items.map((item) => (
|
||||
<DropdownMenuRadioItem value={item.id.toString()}>
|
||||
{item.name}
|
||||
</DropdownMenuRadioItem>
|
||||
))}
|
||||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default function SettingsView() {
|
||||
const [title, setTitle] = useState("Settings");
|
||||
|
|
@ -51,7 +70,7 @@ export default function SettingsView() {
|
|||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
return !!userConfig && (
|
||||
<div id="page" className={styles.page}>
|
||||
<title>
|
||||
{title}
|
||||
|
|
@ -74,11 +93,11 @@ export default function SettingsView() {
|
|||
<div className="cards flex flex-wrap gap-16">
|
||||
<Card className={cardClassName}>
|
||||
<CardHeader className="text-xl">Name</CardHeader>
|
||||
<CardContent>
|
||||
<input type="text" className="border border-gray-300 rounded-lg p-4" defaultValue={userConfig?.given_name} />
|
||||
<CardContent className="overflow-hidden">
|
||||
<input type="text" className="w-full border border-gray-300 rounded-lg p-4" defaultValue={userConfig.given_name} />
|
||||
</CardContent>
|
||||
<CardFooter className="flex gap-4">
|
||||
<Button variant="outline" size="sm">Save</Button>
|
||||
<CardFooter className="flex flex-wrap gap-4">
|
||||
<Button variant="outline" size="sm" className="border-green-400">Save</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
@ -88,51 +107,85 @@ export default function SettingsView() {
|
|||
<div className="cards flex flex-wrap gap-16">
|
||||
<Card className={cardClassName}>
|
||||
<CardHeader className="text-xl">Files</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="overflow-hidden">
|
||||
Manage your synced files
|
||||
</CardContent>
|
||||
<CardFooter className="flex gap-4">
|
||||
<Button variant="outline" size="sm">{userConfig?.enabled_content_source.computer ? "Update" : "Setup"} <ArrowRight className="inline ml-2" weight="bold"/></Button>
|
||||
<Button variant="outline" size="sm" className={`${userConfig?.enabled_content_source.computer ? "" : "hidden"}`}>Disable</Button>
|
||||
<CardFooter className="flex flex-wrap gap-4">
|
||||
<Button variant="outline" size="sm" className="border-green-400">{userConfig.enabled_content_source.computer ? "Update" : "Setup"} <ArrowRight className="inline ml-2" weight="bold"/></Button>
|
||||
<Button variant="outline" size="sm" className={`${userConfig.enabled_content_source.computer ? "border-red-400" : "hidden"}`}>Disable</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className={cardClassName}>
|
||||
<CardHeader className="text-xl">Github</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="overflow-hidden">
|
||||
Set repositories to index
|
||||
</CardContent>
|
||||
<CardFooter className="flex gap-4">
|
||||
<Button variant="outline" size="sm">{userConfig?.enabled_content_source.github ? "Update" : "Setup"} <ArrowRight className="inline ml-2" weight="bold"/></Button>
|
||||
<Button variant="outline" size="sm" className={`${userConfig?.enabled_content_source.github ? "" : "hidden"}`}>Disable</Button>
|
||||
<CardFooter className="flex flex-wrap gap-4">
|
||||
<Button variant="outline" size="sm" className="border-green-400">{userConfig.enabled_content_source.github ? "Update" : "Setup"} <ArrowRight className="inline ml-2" weight="bold"/></Button>
|
||||
<Button variant="outline" size="sm" className={`${userConfig.enabled_content_source.github ? "border-red-400" : "hidden"}`}>Disable</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className={cardClassName}>
|
||||
<CardHeader className="text-xl">Notion</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="overflow-hidden">
|
||||
Sync your Notion pages
|
||||
</CardContent>
|
||||
<CardFooter className="flex gap-4">
|
||||
<Button variant="outline" size="sm">{userConfig?.enabled_content_source.notion ? "Update" : "Setup"} <ArrowRight className="inline ml-2" weight="bold"/></Button>
|
||||
<Button variant="outline" size="sm" className={`${userConfig?.enabled_content_source.notion ? "" : "hidden"}`}>Disable</Button>
|
||||
<CardFooter className="flex flex-wrap gap-4">
|
||||
<Button variant="outline" size="sm" className="border-green-400">{userConfig.enabled_content_source.notion ? "Update" : "Setup"} <ArrowRight className="inline ml-2" weight="bold"/></Button>
|
||||
<Button variant="outline" size="sm" className={`${userConfig.enabled_content_source.notion ? "border-red-400" : "hidden"}`}>Disable</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className={cardClassName}>
|
||||
<CardHeader className="text-xl">Language</CardHeader>
|
||||
<CardContent>
|
||||
<select className="border border-gray-300 rounded-lg">
|
||||
{userConfig?.search_model_options.map(option => (
|
||||
<option
|
||||
key={option.id}
|
||||
value={option.id}
|
||||
selected={option.id === userConfig?.selected_search_model_config}
|
||||
>
|
||||
{option.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<CardContent className="overflow-hidden">
|
||||
<DropdownComponent
|
||||
items={userConfig.search_model_options}
|
||||
selected={userConfig.selected_search_model_config}
|
||||
/>
|
||||
</CardContent>
|
||||
<CardFooter className="flex gap-4">
|
||||
<Button variant="outline" size="sm">Save</Button>
|
||||
<CardFooter className="flex flex-wrap gap-4">
|
||||
<Button variant="outline" size="sm" className="border-green-400">Save</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div className="section grid gap-8">
|
||||
<div className="text-4xl">Features</div>
|
||||
<div className="cards flex flex-wrap gap-16">
|
||||
<Card className={cardClassName}>
|
||||
<CardHeader className="text-xl">Chat</CardHeader>
|
||||
<CardContent className="overflow-hidden">
|
||||
<DropdownComponent
|
||||
items={userConfig.chat_model_options}
|
||||
selected={userConfig.selected_chat_model_config}
|
||||
/>
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-wrap gap-4">
|
||||
<Button variant="outline" size="sm" className="border-green-400">Save</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className={cardClassName}>
|
||||
<CardHeader className="text-xl">Paint</CardHeader>
|
||||
<CardContent className="overflow-hidden">
|
||||
<DropdownComponent
|
||||
items={userConfig.paint_model_options}
|
||||
selected={userConfig.selected_paint_model_config}
|
||||
/>
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-wrap gap-4">
|
||||
<Button variant="outline" size="sm" className="border-green-400">Save</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className={cardClassName}>
|
||||
<CardHeader className="text-xl">Voice</CardHeader>
|
||||
<CardContent className="overflow-hidden">
|
||||
<DropdownComponent
|
||||
items={userConfig.voice_model_options}
|
||||
selected={userConfig.selected_voice_model_config}
|
||||
/>
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-wrap gap-4">
|
||||
<Button variant="outline" size="sm" className="border-green-400">Save</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue