mirror of
https://github.com/browseros-ai/BrowserOS.git
synced 2026-05-17 02:25:57 +00:00
fix: remove checkbox in LLM chat and hub page -- dead code
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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)}
|
||||
/>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
}
|
||||
|
||||
3
bun.lock
3
bun.lock
@@ -172,6 +172,9 @@
|
||||
"packages/shared": {
|
||||
"name": "@browseros/shared",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"zod": "^3.24.2",
|
||||
},
|
||||
},
|
||||
},
|
||||
"trustedDependencies": [
|
||||
|
||||
@@ -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}"
|
||||
|
||||
@@ -5,6 +5,9 @@
|
||||
"scripts": {
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"zod": "^3.24.2"
|
||||
},
|
||||
"exports": {
|
||||
"./constants/ports": {
|
||||
"types": "./src/constants/ports.ts",
|
||||
|
||||
Reference in New Issue
Block a user