Skip to content

Fix language settings and add model search functionality #1396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix language settings and add model search functionality #1396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2a8ee12
fix: load language from user settings instead of hardcoding
SashankBhamidi Aug 25, 2025
9327a87
feat: add search functionality to model selection dropdowns
SashankBhamidi Aug 25, 2025
a8f1efa
fix: address code review feedback
SashankBhamidi Aug 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 66 additions & 26 deletions apps/desktop/src/components/settings/components/ai/llm-custom-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { fetch as tauriFetch } from "@tauri-apps/plugin-http";
import useDebouncedCallback from "beautiful-react-hooks/useDebouncedCallback";
import { useEffect } from "react";

import { Button } from "@hypr/ui/components/ui/button";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@hypr/ui/components/ui/command";
import {
Form,
FormControl,
Expand All @@ -14,8 +16,10 @@ import {
FormMessage,
} from "@hypr/ui/components/ui/form";
import { Input } from "@hypr/ui/components/ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "@hypr/ui/components/ui/popover";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@hypr/ui/components/ui/select";
import { cn } from "@hypr/ui/lib/utils";
import { Check, ChevronsUpDown } from "lucide-react";
import { useState } from "react";
import { SharedCustomEndpointProps } from "./shared";

Expand Down Expand Up @@ -46,6 +50,60 @@ const openrouterModels = [
"mistralai/mistral-small-3.2-24b-instruct",
];

interface SearchableModelSelectProps {
models: string[];
value?: string;
placeholder: string;
onValueChange: (value: string) => void;
}

function SearchableModelSelect({ models, value, placeholder, onValueChange }: SearchableModelSelectProps) {
const [open, setOpen] = useState(false);

return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
aria-label={value ? `Selected model: ${value}` : placeholder}
className="w-full justify-between"
>
{value || placeholder}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[var(--radix-popper-anchor-width)] p-0">
<Command>
<CommandInput placeholder={`Search ${models.length} models...`} />
<CommandEmpty><Trans>No model found.</Trans></CommandEmpty>
<CommandGroup className="max-h-64 overflow-auto">
{models.map((model) => (
<CommandItem
key={model}
value={model}
onSelect={() => {
onValueChange(model);
setOpen(false);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
value === model ? "opacity-100" : "opacity-0",
)}
/>
{model}
</CommandItem>
))}
</CommandGroup>
</Command>
</PopoverContent>
</Popover>
);
}

export function LLMCustomView({
customLLMEnabled,
selectedLLMModel,
Expand Down Expand Up @@ -534,21 +592,12 @@ export function LLMCustomView({
<Trans>Model</Trans>
</FormLabel>
<FormControl>
<Select
<SearchableModelSelect
models={openrouterModels}
value={field.value}
placeholder="Select OpenRouter model"
onValueChange={field.onChange}
>
<SelectTrigger>
<SelectValue placeholder="Select OpenRouter model" />
</SelectTrigger>
<SelectContent>
{openrouterModels.map((model) => (
<SelectItem key={model} value={model}>
{model}
</SelectItem>
))}
</SelectContent>
</Select>
/>
</FormControl>
<FormMessage />
</FormItem>
Expand Down Expand Up @@ -664,21 +713,12 @@ export function LLMCustomView({
)
: othersModels.data && othersModels.data.length > 0
? (
<Select
<SearchableModelSelect
models={othersModels.data}
value={field.value}
placeholder="Select model"
onValueChange={field.onChange}
>
<SelectTrigger>
<SelectValue placeholder="Select model" />
</SelectTrigger>
<SelectContent>
{othersModels.data.map((model) => (
<SelectItem key={model} value={model}>
{model}
</SelectItem>
))}
</SelectContent>
</Select>
/>
)
: (
<Input
Expand Down
56 changes: 42 additions & 14 deletions apps/desktop/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import "./styles/globals.css";

import { i18n } from "@lingui/core";
import { I18nProvider } from "@lingui/react";
import { QueryClient, QueryClientProvider, useQueries, useQueryClient } from "@tanstack/react-query";
import { QueryClient, QueryClientProvider, useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
import { CatchBoundary, createRouter, ErrorComponent, RouterProvider } from "@tanstack/react-router";
import { useEffect } from "react";
import { type ReactNode, useEffect } from "react";
import ReactDOM from "react-dom/client";

import { recordingStartFailedToast } from "@/components/toast/shared";
Expand All @@ -32,8 +32,34 @@ i18n.load({
ko: koMessages,
});

// TODO: load language from user settings
i18n.activate("en");
// Language initialization component
function LanguageInitializer({ children }: { children: ReactNode }) {
const config = useQuery({
queryKey: ["config", "general"],
queryFn: async () => {
const result = await dbCommands.getConfig();
return result;
},
retry: 1,
});

useEffect(() => {
const displayLanguage = config.data?.general.display_language;
if (displayLanguage && (displayLanguage === "en" || displayLanguage === "ko")) {
i18n.activate(displayLanguage);
} else {
// Fallback to English for new users, invalid languages, or if config fails to load
i18n.activate("en");
}
}, [config.data, config.error]);

// Don't render children until language is initialized
if (config.isLoading) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rendering children as soon as isLoading is false can cause a brief flash in the wrong language since i18n.activate runs in useEffect after the initial render; delay rendering until activation completes.

Prompt for AI agents 
Address the following comment on apps/desktop/src/main.tsx at line 57:

<comment>Rendering children as soon as isLoading is false can cause a brief flash in the wrong language since i18n.activate runs in useEffect after the initial render; delay rendering until activation completes.</comment>

<file context>
@@ -32,8 +32,34 @@ i18n.load({
   ko: koMessages,
 });
 
-// TODO: load language from user settings
-i18n.activate(&quot;en&quot;);
+// Language initialization component
+function LanguageInitializer({ children }: { children: ReactNode }) {
+  const config = useQuery({
+    queryKey: [&quot;config&quot;, &quot;general&quot;],
</file context>

return null;
}

return <>{children}</>;
}

const queryClient = new QueryClient({
defaultOptions: {
Expand Down Expand Up @@ -137,16 +163,18 @@ if (!rootElement.innerHTML) {
<TooltipProvider delayDuration={700} skipDelayDuration={300}>
<ThemeProvider defaultTheme="light">
<QueryClientProvider client={queryClient}>
<I18nProvider i18n={i18n}>
<App />
<Toaster
position="bottom-left"
expand={true}
offset={16}
duration={Infinity}
swipeDirections={[]}
/>
</I18nProvider>
<LanguageInitializer>
<I18nProvider i18n={i18n}>
<App />
<Toaster
position="bottom-left"
expand={true}
offset={16}
duration={Infinity}
swipeDirections={[]}
/>
</I18nProvider>
</LanguageInitializer>
</QueryClientProvider>
</ThemeProvider>
</TooltipProvider>
Expand Down