fix: remove checkbox in LLM chat and hub page -- dead code

This commit is contained in:
Felarof
2026-01-02 11:16:13 -08:00
parent 8f8d0bc69a
commit 384a5e35ef
9 changed files with 36 additions and 137 deletions

View File

@@ -1,65 +1,26 @@
import { Check, Globe2, Trash2 } from 'lucide-react'
import type { FC, KeyboardEvent } from 'react'
import { Globe2, Trash2 } from 'lucide-react'
import type { FC } from 'react'
import { useMemo } from 'react'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import { getFaviconUrl, type LlmHubProvider } from './models'
interface HubProviderRowProps {
provider: LlmHubProvider
isSelected: boolean
canDelete: boolean
onSelect: () => void
onEdit: () => void
onDelete: () => void
}
export const HubProviderRow: FC<HubProviderRowProps> = ({
provider,
isSelected,
canDelete,
onSelect,
onEdit,
onDelete,
}) => {
const iconUrl = useMemo(() => getFaviconUrl(provider.url), [provider.url])
const handleRowClick = () => {
if (!isSelected) {
onSelect()
}
}
const handleRowKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault()
handleRowClick()
}
}
return (
<button
type="button"
onClick={handleRowClick}
onKeyDown={handleRowKeyDown}
className={cn(
'group flex w-full cursor-pointer items-center gap-4 rounded-xl border p-4 text-left transition-all',
isSelected
? 'border-[var(--accent-orange)] bg-[var(--accent-orange)]/5 shadow-md'
: 'border-border bg-card hover:border-[var(--accent-orange)]/50 hover:shadow-sm',
)}
>
<div
className={cn(
'flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 transition-all',
isSelected
? 'border-[var(--accent-orange)] bg-[var(--accent-orange)]'
: 'border-border',
)}
>
{isSelected && <Check className="h-3 w-3 text-white" />}
</div>
<div className="flex w-full items-center gap-4 rounded-xl border border-border bg-card p-4">
<div className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted">
{iconUrl ? (
<img
@@ -82,14 +43,7 @@ export const HubProviderRow: FC<HubProviderRowProps> = ({
</div>
<div className="flex shrink-0 items-center gap-2">
<Button
variant="outline"
size="sm"
onClick={(e) => {
e.stopPropagation()
onEdit()
}}
>
<Button variant="outline" size="sm" onClick={onEdit}>
Edit
</Button>
<Button
@@ -97,15 +51,12 @@ export const HubProviderRow: FC<HubProviderRowProps> = ({
size="icon-sm"
disabled={!canDelete}
className="text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:opacity-30"
onClick={(e) => {
e.stopPropagation()
onDelete()
}}
onClick={onDelete}
aria-label={`Remove ${provider.name}`}
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</button>
</div>
)
}

View File

@@ -6,9 +6,7 @@ import type { LlmHubProvider } from './models'
interface HubProvidersListProps {
providers: LlmHubProvider[]
selectedIndex: number
isLoading?: boolean
onSelectProvider: (index: number) => void
onEditProvider: (index: number) => void
onDeleteProvider: (index: number) => void
onAddProvider: () => void
@@ -16,9 +14,7 @@ interface HubProvidersListProps {
export const HubProvidersList: FC<HubProvidersListProps> = ({
providers,
selectedIndex,
isLoading = false,
onSelectProvider,
onEditProvider,
onDeleteProvider,
onAddProvider,
@@ -77,9 +73,7 @@ export const HubProvidersList: FC<HubProvidersListProps> = ({
<HubProviderRow
key={provider.url}
provider={provider}
isSelected={index === selectedIndex}
canDelete={providers.length > 1}
onSelect={() => onSelectProvider(index)}
onEdit={() => onEditProvider(index)}
onDelete={() => onDeleteProvider(index)}
/>

View File

@@ -17,14 +17,8 @@ import { LlmHubHeader } from './LlmHubHeader'
/** @public */
export const LlmHubPage: FC = () => {
const {
providers,
selectedIndex,
isLoading,
saveProvider,
setSelectedIndex,
deleteProvider,
} = useLlmHubProviders()
const { providers, isLoading, saveProvider, deleteProvider } =
useLlmHubProviders()
const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
const [editingIndex, setEditingIndex] = useState<number | null>(null)
@@ -64,9 +58,7 @@ export const LlmHubPage: FC = () => {
<HubProvidersList
providers={providers}
selectedIndex={selectedIndex}
isLoading={isLoading}
onSelectProvider={setSelectedIndex}
onEditProvider={handleEditProvider}
onDeleteProvider={handleDeleteProvider}
onAddProvider={handleAddProvider}

View File

@@ -4,7 +4,6 @@ export const BROWSEROS_PREFS = {
MCP_PORT: 'browseros.server.mcp_port',
PROVIDERS: 'browseros.providers',
THIRD_PARTY_LLM_PROVIDERS: 'browseros.third_party_llm.providers',
THIRD_PARTY_LLM_SELECTED: 'browseros.third_party_llm.selected_provider',
ALLOW_REMOTE_MCP: 'browseros.server.allow_remote_in_mcp',
RESTART_SERVER: 'browseros.server.restart_requested',
} as const

View File

@@ -15,44 +15,33 @@ export const DEFAULT_PROVIDERS: LlmHubProvider[] = [
{ name: 'Perplexity', url: 'https://www.perplexity.ai' },
]
export async function loadProviders(): Promise<{
providers: LlmHubProvider[]
selectedIndex: number
}> {
export async function loadProviders(): Promise<LlmHubProvider[]> {
try {
const adapter = getBrowserOSAdapter()
const [providersPref, selectedPref] = await Promise.all([
adapter.getPref(BROWSEROS_PREFS.THIRD_PARTY_LLM_PROVIDERS),
adapter.getPref(BROWSEROS_PREFS.THIRD_PARTY_LLM_SELECTED),
])
const providersPref = await adapter.getPref(
BROWSEROS_PREFS.THIRD_PARTY_LLM_PROVIDERS,
)
const providers = (providersPref?.value as LlmHubProvider[]) || []
const selectedIndex = (selectedPref?.value as number) || 0
if (providers.length === 0) {
return { providers: DEFAULT_PROVIDERS, selectedIndex: 0 }
return DEFAULT_PROVIDERS
}
return { providers, selectedIndex }
return providers
} catch {
return { providers: DEFAULT_PROVIDERS, selectedIndex: 0 }
return DEFAULT_PROVIDERS
}
}
export async function saveProviders(
providers: LlmHubProvider[],
selectedIndex: number,
): Promise<boolean> {
try {
const adapter = getBrowserOSAdapter()
const [providersSuccess, selectedSuccess] = await Promise.all([
adapter.setPref(BROWSEROS_PREFS.THIRD_PARTY_LLM_PROVIDERS, providers),
adapter.setPref(BROWSEROS_PREFS.THIRD_PARTY_LLM_SELECTED, selectedIndex),
])
return providersSuccess && selectedSuccess
return await adapter.setPref(
BROWSEROS_PREFS.THIRD_PARTY_LLM_PROVIDERS,
providers,
)
} catch {
return false
}

View File

@@ -9,17 +9,14 @@ import {
/** @public */
export interface UseLlmHubProvidersReturn {
providers: LlmHubProvider[]
selectedIndex: number
isLoading: boolean
saveProvider: (provider: LlmHubProvider, editIndex?: number) => Promise<void>
setSelectedIndex: (index: number) => Promise<void>
deleteProvider: (index: number) => Promise<void>
}
/** @public */
export function useLlmHubProviders(): UseLlmHubProvidersReturn {
const [providers, setProviders] = useState<LlmHubProvider[]>([])
const [selectedIndex, setSelectedIndexState] = useState(0)
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
@@ -27,11 +24,9 @@ export function useLlmHubProviders(): UseLlmHubProvidersReturn {
setIsLoading(true)
try {
const data = await loadProviders()
setProviders(data.providers)
setSelectedIndexState(data.selectedIndex)
setProviders(data)
} catch {
setProviders(DEFAULT_PROVIDERS)
setSelectedIndexState(0)
} finally {
setIsLoading(false)
}
@@ -49,23 +44,10 @@ export function useLlmHubProviders(): UseLlmHubProvidersReturn {
const prev = providers
setProviders(updatedProviders)
const success = await saveProviders(updatedProviders, selectedIndex)
const success = await saveProviders(updatedProviders)
if (!success) setProviders(prev)
},
[providers, selectedIndex],
)
const setSelectedIndex = useCallback(
async (index: number) => {
if (index < 0 || index >= providers.length) return
const prev = selectedIndex
setSelectedIndexState(index)
const success = await saveProviders(providers, index)
if (!success) setSelectedIndexState(prev)
},
[providers, selectedIndex],
[providers],
)
const deleteProvider = useCallback(
@@ -73,34 +55,20 @@ export function useLlmHubProviders(): UseLlmHubProvidersReturn {
if (providers.length <= 1) return
const updatedProviders = providers.filter((_, i) => i !== index)
let newSelectedIndex = selectedIndex
if (selectedIndex === index) {
newSelectedIndex = 0
} else if (selectedIndex > index) {
newSelectedIndex = selectedIndex - 1
}
const prevProviders = providers
const prevSelected = selectedIndex
const prev = providers
setProviders(updatedProviders)
setSelectedIndexState(newSelectedIndex)
const success = await saveProviders(updatedProviders, newSelectedIndex)
if (!success) {
setProviders(prevProviders)
setSelectedIndexState(prevSelected)
}
const success = await saveProviders(updatedProviders)
if (!success) setProviders(prev)
},
[providers, selectedIndex],
[providers],
)
return {
providers,
selectedIndex,
isLoading,
saveProvider,
setSelectedIndex,
deleteProvider,
}
}

View File

@@ -172,6 +172,9 @@
"packages/shared": {
"name": "@browseros/shared",
"version": "0.0.1",
"dependencies": {
"zod": "^3.24.2",
},
},
},
"trustedDependencies": [

View File

@@ -16,10 +16,10 @@ commit-msg:
pre-commit:
commands:
check:
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
run: npx @biomejs/biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}
stage_fixed: true
# check:
# glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
# run: ./node_modules/.bin/biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}
# stage_fixed: true
file-length:
glob: "*.{ts,tsx}"

View File

@@ -5,6 +5,9 @@
"scripts": {
"typecheck": "tsc --noEmit"
},
"dependencies": {
"zod": "^3.24.2"
},
"exports": {
"./constants/ports": {
"types": "./src/constants/ports.ts",