From a5a06da3fcf03cf6163c66cac34bb580b5830c01 Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Wed, 17 Jul 2024 18:02:51 +0530 Subject: [PATCH] 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 --- src/interface/web/app/settings/page.tsx | 151 ++++++++++++++++-------- 1 file changed, 102 insertions(+), 49 deletions(-) diff --git a/src/interface/web/app/settings/page.tsx b/src/interface/web/app/settings/page.tsx index f0511ddd..114e9b9f 100644 --- a/src/interface/web/app/settings/page.tsx +++ b/src/interface/web/app/settings/page.tsx @@ -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 = ({ header, children, footer }) => { - return ( - - {header} - - {children} - - - {footer} - - +const DropdownComponent: React.FC = ({items, selected}) => { + const [position, setPosition] = useState(selected?.toString() ?? "0"); + + return !!selected && ( +
+ + + + + + + {items.map((item) => ( + + {item.name} + + ))} + + + +
); -}; +} 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 && (
{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>