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

Save model on selecting model in dropdown. No extra save action reqd

Browse Source 
- Remove now unnecessary button to Save in Card with dropdown
- Use toast to show success, failure (not working)
- Rename language to search, Move it to features section. Add icon to
  the card
This commit is contained in:
Debanjum Singh Solanky
2024-07-18 05:37:19 +05:30
parent 13292fc4ca
commit 00fa4fa0fa
2 changed files with 56 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/interface/web/app/settings/layout.tsx
View File

@@ -1,6 +1,7 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Noto_Sans } from "next/font/google"; import { Noto_Sans } from "next/font/google";
import "../globals.css"; import "../globals.css";
import { Toaster } from "@/components/ui/toaster";
const inter = Noto_Sans({ subsets: ["latin"] }); const inter = Noto_Sans({ subsets: ["latin"] });
@@ -30,6 +31,7 @@ export default function RootLayout({
object-src 'none';"></meta> object-src 'none';"></meta>
<body className={inter.className}> <body className={inter.className}>
{children} {children}
<Toaster />
</body> </body>
</html> </html>
); );

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

@@ -3,6 +3,7 @@
import styles from "./settings.module.css"; import styles from "./settings.module.css";
import { Suspense, useEffect, useState } from "react"; import { Suspense, useEffect, useState } from "react";
import { useToast } from "@/components/ui/use-toast"
import { useUserConfig, ModelOptions } from "../common/auth"; import { useUserConfig, ModelOptions } from "../common/auth";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@@ -20,7 +21,7 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu" } from "@/components/ui/dropdown-menu"
import { ArrowRight, ChatCircleText, Key, Palette, SpeakerHigh, UserCircle } from "@phosphor-icons/react"; import { ArrowRight, ChatCircleText, Key, Palette, SpeakerHigh, UserCircle, FileMagnifyingGlass } 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";
@@ -30,9 +31,10 @@ import Loading from "../components/loading/loading";
interface DropdownComponentProps { interface DropdownComponentProps {
items: ModelOptions[]; items: ModelOptions[];
selected: number; selected: number;
callbackFunc: (value: string) => Promise<void>;
} }
const DropdownComponent: React.FC<DropdownComponentProps> = ({ items, selected }) => { const DropdownComponent: React.FC<DropdownComponentProps> = ({ items, selected, callbackFunc }) => {
const [position, setPosition] = useState(selected?.toString() ?? "0"); const [position, setPosition] = useState(selected?.toString() ?? "0");
return !!selected && ( return !!selected && (
@@ -44,7 +46,10 @@ const DropdownComponent: React.FC<DropdownComponentProps> = ({ items, selected }
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent>
<DropdownMenuRadioGroup value={position.toString()} onValueChange={setPosition}> <DropdownMenuRadioGroup
value={position.toString()}
onValueChange={async (value) => { setPosition(value); await callbackFunc(value); }}
>
{items.map((item) => ( {items.map((item) => (
<DropdownMenuRadioItem value={item.id.toString()}> <DropdownMenuRadioItem value={item.id.toString()}>
{item.name} {item.name}
@@ -62,6 +67,7 @@ export default function SettingsView() {
const [isMobileWidth, setIsMobileWidth] = useState(false); const [isMobileWidth, setIsMobileWidth] = useState(false);
const userConfig = useUserConfig(true); const userConfig = useUserConfig(true);
const cardClassName = "w-1/3 grid grid-flow-column border border-gray-300 shadow-md rounded-lg"; const cardClassName = "w-1/3 grid grid-flow-column border border-gray-300 shadow-md rounded-lg";
const { toast } = useToast();
useEffect(() => { useEffect(() => {
setIsMobileWidth(window.innerWidth < 786); setIsMobileWidth(window.innerWidth < 786);
@@ -70,7 +76,38 @@ export default function SettingsView() {
return () => window.removeEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize);
}, []); }, []);
return !!userConfig && ( const updateModel = (name: string) => async (id: string) => {
try {
const response = await fetch(`/api/model/${name}?id=` + id, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
}
});
if (response.ok) {
const result = await response.json();
toast({
description: `${name} model updated succesfully`,
});
} else {
toast({
description: `Failed to update ${name} model`,
variant: "destructive",
});
}
} catch (error) {
console.error('Error updating search model:', error);
toast({
description: `An error occured while updating the ${name} model`,
variant: "destructive",
});
}
};
if (!userConfig) return <Loading />;
return (
<div id="page" className={styles.page}> <div id="page" className={styles.page}>
<title> <title>
{title} {title}
@@ -135,18 +172,6 @@ export default function SettingsView() {
<Button variant="outline" size="sm" className={`${userConfig.enabled_content_source.notion ? "border-red-400" : "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}>
<CardHeader className="text-xl flex flex-row">Language</CardHeader>
<CardContent className="overflow-hidden">
<DropdownComponent
items={userConfig.search_model_options}
selected={userConfig.selected_search_model_config}
/>
</CardContent>
<CardFooter className="flex flex-wrap gap-4">
<Button variant="outline" size="sm" className="border-green-400">Save</Button>
</CardFooter>
</Card>
</div> </div>
</div> </div>
<div className="section grid gap-8"> <div className="section grid gap-8">
@@ -158,11 +183,19 @@ export default function SettingsView() {
<DropdownComponent <DropdownComponent
items={userConfig.chat_model_options} items={userConfig.chat_model_options}
selected={userConfig.selected_chat_model_config} selected={userConfig.selected_chat_model_config}
callbackFunc={updateModel("chat")}
/>
</CardContent>
</Card>
<Card className={cardClassName}>
<CardHeader className="text-xl flex flex-row"><FileMagnifyingGlass className="h-7 w-7 mr-2"/>Search</CardHeader>
<CardContent className="overflow-hidden">
<DropdownComponent
items={userConfig.search_model_options}
selected={userConfig.selected_search_model_config}
callbackFunc={updateModel("search")}
/> />
</CardContent> </CardContent>
<CardFooter className="flex flex-wrap gap-4">
<Button variant="outline" size="sm" className="border-green-400" onClick={updateSearchModel}>Save</Button>
</CardFooter>
</Card> </Card>
<Card className={cardClassName}> <Card className={cardClassName}>
<CardHeader className="text-xl flex flex-row"><Palette className="h-7 w-7 mr-2"/>Paint</CardHeader> <CardHeader className="text-xl flex flex-row"><Palette className="h-7 w-7 mr-2"/>Paint</CardHeader>
@@ -170,11 +203,9 @@ export default function SettingsView() {
<DropdownComponent <DropdownComponent
items={userConfig.paint_model_options} items={userConfig.paint_model_options}
selected={userConfig.selected_paint_model_config} selected={userConfig.selected_paint_model_config}
callbackFunc={updateModel("paint")}
/> />
</CardContent> </CardContent>
<CardFooter className="flex flex-wrap gap-4">
<Button variant="outline" size="sm" className="border-green-400">Save</Button>
</CardFooter>
</Card> </Card>
<Card className={cardClassName}> <Card className={cardClassName}>
<CardHeader className="text-xl flex flex-row"><SpeakerHigh className="h-7 w-7 mr-2"/>Voice</CardHeader> <CardHeader className="text-xl flex flex-row"><SpeakerHigh className="h-7 w-7 mr-2"/>Voice</CardHeader>
@@ -182,11 +213,9 @@ export default function SettingsView() {
<DropdownComponent <DropdownComponent
items={userConfig.voice_model_options} items={userConfig.voice_model_options}
selected={userConfig.selected_voice_model_config} selected={userConfig.selected_voice_model_config}
callbackFunc={updateModel("voice")}
/> />
</CardContent> </CardContent>
<CardFooter className="flex flex-wrap gap-4">
<Button variant="outline" size="sm" className="border-green-400">Save</Button>
</CardFooter>
</Card> </Card>
</div> </div>
</div> </div>