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

Use Dropdown component for model options. Make cards more responsive

Browse Source 
- 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
2024-07-17 18:02:51 +05:30
parent ade2f6f5d1
commit a5a06da3fc
1 changed files with 102 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
src/interface/web/app/settings/page.tsx
View File

@@ -4,7 +4,7 @@ import styles from "./settings.module.css";
import { Suspense, useEffect, useState } from "react"; import { Suspense, useEffect, useState } from "react";
import { useUserConfig } from "../common/auth"; import { useUserConfig, ModelOptions } from "../common/auth";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Card, Card,
@@ -12,31 +12,50 @@ import {
CardFooter, CardFooter,
CardHeader, CardHeader,
} from "@/components/ui/card"; } 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 NavMenu from "../components/navMenu/navMenu";
import SidePanel from "../components/sidePanel/chatHistorySidePanel"; import SidePanel from "../components/sidePanel/chatHistorySidePanel";
import Loading from "../components/loading/loading"; import Loading from "../components/loading/loading";
import { ArrowRight } from "@phosphor-icons/react";
interface CardComponentProps { interface DropdownComponentProps {
header: string; items: ModelOptions[];
children: React.ReactNode; selected: number;
footer: React.ReactNode;
} }
const CardComponent: React.FC<CardComponentProps> = ({ header, children, footer }) => { const DropdownComponent: React.FC<DropdownComponentProps> = ({items, selected}) => {
return ( const [position, setPosition] = useState(selected?.toString() ?? "0");
<Card className="w-1/3 grid grid-flow-column border border-gray-300 shadow-md rounded-lg">
<CardHeader className="text-xl">{header}</CardHeader> return !!selected && (
<CardContent> <div className="overflow-hidden">
{children} <DropdownMenu>
</CardContent> <DropdownMenuTrigger asChild className="w-full">
<CardFooter className="flex gap-4"> <Button variant="outline" className="justify-start">
{footer} {items.find(item => item.id === Number(position))?.name}
</CardFooter> </Button>
</Card> </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() { export default function SettingsView() {
const [title, setTitle] = useState("Settings"); const [title, setTitle] = useState("Settings");
@@ -51,7 +70,7 @@ export default function SettingsView() {
return () => window.removeEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize);
}, []); }, []);
return ( return !!userConfig && (
<div id="page" className={styles.page}> <div id="page" className={styles.page}>
<title> <title>
{title} {title}
@@ -74,11 +93,11 @@ export default function SettingsView() {
<div className="cards flex flex-wrap gap-16"> <div className="cards flex flex-wrap gap-16">
<Card className={cardClassName}> <Card className={cardClassName}>
<CardHeader className="text-xl">Name</CardHeader> <CardHeader className="text-xl">Name</CardHeader>
<CardContent> <CardContent className="overflow-hidden">
<input type="text" className="border border-gray-300 rounded-lg p-4" defaultValue={userConfig?.given_name} /> <input type="text" className="w-full border border-gray-300 rounded-lg p-4" defaultValue={userConfig.given_name} />
</CardContent> </CardContent>
<CardFooter className="flex gap-4"> <CardFooter className="flex flex-wrap gap-4">
<Button variant="outline" size="sm">Save</Button> <Button variant="outline" size="sm" className="border-green-400">Save</Button>
</CardFooter> </CardFooter>
</Card> </Card>
</div> </div>
@@ -88,51 +107,85 @@ export default function SettingsView() {
<div className="cards flex flex-wrap gap-16"> <div className="cards flex flex-wrap gap-16">
<Card className={cardClassName}> <Card className={cardClassName}>
<CardHeader className="text-xl">Files</CardHeader> <CardHeader className="text-xl">Files</CardHeader>
<CardContent> <CardContent className="overflow-hidden">
Manage your synced files Manage your synced files
</CardContent> </CardContent>
<CardFooter className="flex gap-4"> <CardFooter className="flex flex-wrap 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="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 ? "" : "hidden"}`}>Disable</Button> <Button variant="outline" size="sm" className={`${userConfig.enabled_content_source.computer ? "border-red-400" : "hidden"}`}>Disable</Button>
</CardFooter> </CardFooter>
</Card> </Card>
<Card className={cardClassName}> <Card className={cardClassName}>
<CardHeader className="text-xl">Github</CardHeader> <CardHeader className="text-xl">Github</CardHeader>
<CardContent> <CardContent className="overflow-hidden">
Set repositories to index Set repositories to index
</CardContent> </CardContent>
<CardFooter className="flex gap-4"> <CardFooter className="flex flex-wrap 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="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 ? "" : "hidden"}`}>Disable</Button> <Button variant="outline" size="sm" className={`${userConfig.enabled_content_source.github ? "border-red-400" : "hidden"}`}>Disable</Button>
</CardFooter> </CardFooter>
</Card> </Card>
<Card className={cardClassName}> <Card className={cardClassName}>
<CardHeader className="text-xl">Notion</CardHeader> <CardHeader className="text-xl">Notion</CardHeader>
<CardContent> <CardContent className="overflow-hidden">
Sync your Notion pages Sync your Notion pages
</CardContent> </CardContent>
<CardFooter className="flex gap-4"> <CardFooter className="flex flex-wrap 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="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 ? "" : "hidden"}`}>Disable</Button> <Button variant="outline" size="sm" className={`${userConfig.enabled_content_source.notion ? "border-red-400" : "hidden"}`}>Disable</Button>
</CardFooter> </CardFooter>
</Card> </Card>
<Card className={cardClassName}> <Card className={cardClassName}>
<CardHeader className="text-xl">Language</CardHeader> <CardHeader className="text-xl">Language</CardHeader>
<CardContent> <CardContent className="overflow-hidden">
<select className="border border-gray-300 rounded-lg"> <DropdownComponent
{userConfig?.search_model_options.map(option => ( items={userConfig.search_model_options}
<option selected={userConfig.selected_search_model_config}
key={option.id} />
value={option.id}
selected={option.id === userConfig?.selected_search_model_config}
>
{option.name}
</option>
))}
</select>
</CardContent> </CardContent>
<CardFooter className="flex gap-4"> <CardFooter className="flex flex-wrap gap-4">
<Button variant="outline" size="sm">Save</Button> <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> </CardFooter>
</Card> </Card>
</div> </div>