tkmind/tkmind_go
1
0
Fork 0
Code Issues Pull Requests Actions 7 Packages Projects Releases Wiki Activity

Optimise load config in UI (#6662)

Browse Source
This commit is contained in:
Lifei Zhou
2026-01-24 03:45:29 +11:00
committed by GitHub
parent 346ff7ab84
commit 6375aace13
10 changed files with 113 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/desktop/src/components/ChatInput.tsx
+23 -15
View File
@@ -17,10 +17,10 @@ import { AlertType, useAlerts } from './alerts';
import { useConfig } from './ConfigContext';
import { useModelAndProvider } from './ModelAndProviderContext';
import { useWhisper } from '../hooks/useWhisper';
import { DICTATION_PROVIDER_ELEVENLABS } from '../hooks/dictationConstants';
import { WaveformVisualizer } from './WaveformVisualizer';
import { toastError } from '../toasts';
import MentionPopover, { DisplayItemWithMatch } from './MentionPopover';
import { useDictationSettings } from '../hooks/useDictationSettings';
import { COST_TRACKING_ENABLED, VOICE_DICTATION_ELEVENLABS_ENABLED } from '../updates';
import { CostTracker } from './bottom_menu/CostTracker';
import { DroppedFile, useFileDrop } from '../hooks/useFileDrop';
@@ -265,6 +265,7 @@ export default function ChatInput({
stopRecording,
recordingDuration,
estimatedSize,
dictationSettings,
} = useWhisper({
onTranscription: (text) => {
trackVoiceDictation('transcribed');
@@ -289,8 +290,6 @@ export default function ChatInput({
});
},
});
const { settings: dictationSettings } = useDictationSettings();
const internalTextAreaRef = useRef<HTMLTextAreaElement>(null);
const textAreaRef = inputRef || internalTextAreaRef;
const timeoutRefsRef = useRef<Set<ReturnType<typeof setTimeout>>>(new Set());
@@ -618,17 +617,20 @@ export default function ChatInput({
return [...pastedImageData, ...droppedImageData];
}, [pastedImages, allDroppedFiles]);
const appendDroppedFilePaths = useCallback((text: string): string => {
const droppedFilePaths = allDroppedFiles
.filter((file) => !file.isImage && !file.error && !file.isLoading)
.map((file) => file.path);
const appendDroppedFilePaths = useCallback(
(text: string): string => {
const droppedFilePaths = allDroppedFiles
.filter((file) => !file.isImage && !file.error && !file.isLoading)
.map((file) => file.path);
if (droppedFilePaths.length > 0) {
const pathsString = droppedFilePaths.join(' ');
return text ? `${text} ${pathsString}` : pathsString;
}
return text;
}, [allDroppedFiles]);
if (droppedFilePaths.length > 0) {
const pathsString = droppedFilePaths.join(' ');
return text ? `${text} ${pathsString}` : pathsString;
}
return text;
},
[allDroppedFiles]
);
const clearInputState = useCallback(() => {
setDisplayValue('');
@@ -1189,7 +1191,13 @@ export default function ChatInput({
onDrop={handleLocalDrop}
onDragOver={handleLocalDragOver}
>
<input ref={fileInputRef} type="file" onChange={handleFileInputChange} style={{ display: 'none' }} accept="*/*" />
<input
ref={fileInputRef}
type="file"
onChange={handleFileInputChange}
style={{ display: 'none' }}
accept="*/*"
/>
{/* Message Queue Display */}
{queuedMessages.length > 0 && (
<MessageQueue
@@ -1270,7 +1278,7 @@ export default function ChatInput({
<b>Models.</b>
</p>
) : VOICE_DICTATION_ELEVENLABS_ENABLED &&
dictationSettings.provider === 'elevenlabs' ? (
dictationSettings.provider === DICTATION_PROVIDER_ELEVENLABS ? (
<p>
ElevenLabs API key is not configured. Set it up in <b>Settings</b> {'>'}{' '}
<b>Chat</b> {'>'} <b>Voice Dictation.</b>
ui/desktop/src/components/ConfigContext.tsx
+17 -16
View File
@@ -66,6 +66,10 @@ export const ConfigProvider: React.FC<ConfigProviderProps> = ({ children }) => {
const [extensionsList, setExtensionsList] = useState<FixedExtensionEntry[]>([]);
const [extensionWarnings, setExtensionWarnings] = useState<string[]>([]);
// Ref to access providersList in getProviders without recreating the callback
const providersListRef = React.useRef<ProviderDetails[]>(providersList);
providersListRef.current = providersList;
const reloadConfig = useCallback(async () => {
const response = await readAllConfig();
setConfig(response.data?.config || {});
@@ -168,23 +172,20 @@ export const ConfigProvider: React.FC<ConfigProviderProps> = ({ children }) => {
[addExtension, getExtensions]
);
const getProviders = useCallback(
async (forceRefresh = false): Promise<ProviderDetails[]> => {
if (forceRefresh || providersList.length === 0) {
try {
const response = await providers();
const providersData = response.data || [];
setProvidersList(providersData);
return providersData;
} catch (error) {
console.error('Failed to fetch providers:', error);
return [];
}
const getProviders = useCallback(async (forceRefresh = false): Promise<ProviderDetails[]> => {
if (forceRefresh || providersListRef.current.length === 0) {
try {
const response = await providers();
const providersData = response.data || [];
setProvidersList(providersData);
return providersData;
} catch (error) {
console.error('Failed to fetch providers:', error);
return [];
}
return providersList;
},
[providersList]
);
}
return providersListRef.current;
}, []);
const getProviderModels = useCallback(async (providerName: string): Promise<string[]> => {
try {
ui/desktop/src/components/bottom_menu/BottomMenuExtensionSelection.tsx
+5 -1
View File
@@ -28,6 +28,7 @@ export const BottomMenuExtensionSelection = ({ sessionId }: BottomMenuExtensionS
const [pendingSort, setPendingSort] = useState(false);
const [togglingExtension, setTogglingExtension] = useState<string | null>(null);
const [refreshTrigger, setRefreshTrigger] = useState(0);
const [isSessionExtensionsLoaded, setIsSessionExtensionsLoaded] = useState(false);
const sortTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const { extensionsList: allExtensions } = useConfig();
const isHubView = !sessionId;
@@ -70,12 +71,15 @@ export const BottomMenuExtensionSelection = ({ sessionId }: BottomMenuExtensionS
if (response.data?.extensions) {
setSessionExtensions(response.data.extensions);
setIsSessionExtensionsLoaded(true);
}
} catch (error) {
console.error('Failed to fetch session extensions:', error);
setIsSessionExtensionsLoaded(true);
}
};
setIsSessionExtensionsLoaded(false);
fetchExtensions();
}, [sessionId, isOpen, refreshTrigger]);
@@ -225,7 +229,7 @@ export const BottomMenuExtensionSelection = ({ sessionId }: BottomMenuExtensionS
>
<DropdownMenuTrigger asChild>
<button
className="flex items-center cursor-pointer [&_svg]:size-4 text-text-default/70 hover:text-text-default hover:scale-100 hover:bg-transparent text-xs"
className={`flex items-center [&_svg]:size-4 text-text-default/70 hover:text-text-default hover:scale-100 hover:bg-transparent text-xs cursor-pointer ${allExtensions.length === 0 || (!isHubView && !isSessionExtensionsLoaded) ? 'invisible' : ''}`}
title="manage extensions"
>
<Puzzle className="mr-1 h-4 w-4" />
ui/desktop/src/components/settings/dictation/ElevenLabsKeyInput.tsx
+15 -10
View File
@@ -1,7 +1,8 @@
import { useState, useEffect, useRef } from 'react';
import { Input } from '../../ui/input';
import { useConfig } from '../../ConfigContext';
import { ELEVENLABS_API_KEY } from '../../../hooks/dictationConstants';
import { ELEVENLABS_API_KEY, isSecretKeyConfigured } from '../../../hooks/dictationConstants';
import { setElevenLabsKeyCache } from '../../../hooks/useDictationSettings';
export const ElevenLabsKeyInput = () => {
const [elevenLabsApiKey, setElevenLabsApiKey] = useState('');
@@ -14,12 +15,16 @@ export const ElevenLabsKeyInput = () => {
const loadKey = async () => {
setIsLoadingKey(true);
try {
const keyExists = await read(ELEVENLABS_API_KEY, true);
if (keyExists === true) {
const response = await read(ELEVENLABS_API_KEY, true);
if (isSecretKeyConfigured(response)) {
setHasElevenLabsKey(true);
setElevenLabsKeyCache(true);
} else {
setElevenLabsKeyCache(false);
}
} catch (error) {
console.error('Error checking ElevenLabs API key:', error);
setElevenLabsKeyCache(false);
} finally {
setIsLoadingKey(false);
}
@@ -34,9 +39,11 @@ export const ElevenLabsKeyInput = () => {
if (elevenLabsApiKeyRef.current) {
const keyToSave = elevenLabsApiKeyRef.current;
if (keyToSave.trim()) {
upsert(ELEVENLABS_API_KEY, keyToSave, true).catch((error) => {
console.error('Error saving ElevenLabs API key on unmount:', error);
});
upsert(ELEVENLABS_API_KEY, keyToSave, true)
.then(() => setElevenLabsKeyCache(true))
.catch((error) => {
console.error('Error saving ElevenLabs API key on unmount:', error);
});
}
}
};
@@ -53,15 +60,13 @@ export const ElevenLabsKeyInput = () => {
const saveElevenLabsKey = async () => {
try {
if (elevenLabsApiKey.trim()) {
console.log('Saving ElevenLabs API key to secure storage...');
await upsert(ELEVENLABS_API_KEY, elevenLabsApiKey, true);
setHasElevenLabsKey(true);
console.log('ElevenLabs API key saved successfully');
setElevenLabsKeyCache(true);
} else {
console.log('Removing ElevenLabs API key from secure storage...');
await upsert(ELEVENLABS_API_KEY, null, true);
setHasElevenLabsKey(false);
console.log('ElevenLabs API key removed successfully');
setElevenLabsKeyCache(false);
}
} catch (error) {
console.error('Error saving ElevenLabs API key:', error);
ui/desktop/src/components/settings/dictation/ProviderInfo.tsx
+2 -1
View File
@@ -1,4 +1,5 @@
import { DictationProvider } from '../../../hooks/useDictationSettings';
import { DICTATION_PROVIDER_ELEVENLABS } from '../../../hooks/dictationConstants';
import { VOICE_DICTATION_ELEVENLABS_ENABLED } from '../../../updates';
interface ProviderInfoProps {
@@ -16,7 +17,7 @@ export const ProviderInfo = ({ provider }: ProviderInfoProps) => {
configured in the Models section.
</p>
)}
{VOICE_DICTATION_ELEVENLABS_ENABLED && provider === 'elevenlabs' && (
{VOICE_DICTATION_ELEVENLABS_ENABLED && provider === DICTATION_PROVIDER_ELEVENLABS && (
<div>
<p className="text-xs text-text-muted">
Uses ElevenLabs speech-to-text API for high-quality transcription.
ui/desktop/src/components/settings/dictation/ProviderSelector.tsx
+8 -6
View File
@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { ChevronDown } from 'lucide-react';
import { DictationProvider, DictationSettings } from '../../../hooks/useDictationSettings';
import { DICTATION_PROVIDER_ELEVENLABS } from '../../../hooks/dictationConstants';
import { useConfig } from '../../ConfigContext';
import { ElevenLabsKeyInput } from './ElevenLabsKeyInput';
import { ProviderInfo } from './ProviderInfo';
@@ -57,7 +58,7 @@ export const ProviderSelector = ({ settings, onProviderChange }: ProviderSelecto
switch (provider) {
case 'openai':
return 'OpenAI Whisper';
case 'elevenlabs':
case DICTATION_PROVIDER_ELEVENLABS:
return 'ElevenLabs';
default:
return 'None (disabled)';
@@ -95,11 +96,13 @@ export const ProviderSelector = ({ settings, onProviderChange }: ProviderSelecto
{VOICE_DICTATION_ELEVENLABS_ENABLED && (
<button
onClick={() => handleProviderChange('elevenlabs')}
onClick={() => handleProviderChange(DICTATION_PROVIDER_ELEVENLABS)}
className="w-full px-3 py-2 text-left text-sm hover:bg-background-subtle transition-colors text-text-default last:rounded-b-md"
>
ElevenLabs
{settings.provider === 'elevenlabs' && <span className="float-right">✓</span>}
{settings.provider === DICTATION_PROVIDER_ELEVENLABS && (
<span className="float-right">✓</span>
)}
</button>
)}
</div>
@@ -107,9 +110,8 @@ export const ProviderSelector = ({ settings, onProviderChange }: ProviderSelecto
</div>
</div>
{VOICE_DICTATION_ELEVENLABS_ENABLED && settings.provider === 'elevenlabs' && (
<ElevenLabsKeyInput />
)}
{VOICE_DICTATION_ELEVENLABS_ENABLED &&
settings.provider === DICTATION_PROVIDER_ELEVENLABS && <ElevenLabsKeyInput />}
<ProviderInfo provider={settings.provider} />
</div>
ui/desktop/src/components/settings/dictation/VoiceDictationToggle.tsx
+5 -1
View File
@@ -3,6 +3,7 @@ import { Switch } from '../../ui/switch';
import { DictationProvider, DictationSettings } from '../../../hooks/useDictationSettings';
import {
DICTATION_SETTINGS_KEY,
DICTATION_PROVIDER_ELEVENLABS,
getDefaultDictationSettings,
} from '../../../hooks/dictationConstants';
import { useConfig } from '../../ConfigContext';
@@ -28,7 +29,10 @@ export const VoiceDictationToggle = () => {
loadedSettings = parsed;
// If ElevenLabs is disabled and user has it selected, reset to OpenAI
if (!VOICE_DICTATION_ELEVENLABS_ENABLED && loadedSettings.provider === 'elevenlabs') {
if (
!VOICE_DICTATION_ELEVENLABS_ENABLED &&
loadedSettings.provider === DICTATION_PROVIDER_ELEVENLABS
) {
loadedSettings = {
...loadedSettings,
provider: 'openai',
ui/desktop/src/hooks/dictationConstants.ts
+7
View File
@@ -2,6 +2,13 @@ import { DictationSettings, DictationProvider } from './useDictationSettings';
export const DICTATION_SETTINGS_KEY = 'dictation_settings';
export const ELEVENLABS_API_KEY = 'ELEVENLABS_API_KEY';
export const DICTATION_PROVIDER_ELEVENLABS = 'elevenlabs' as const;
export const isSecretKeyConfigured = (response: unknown): boolean =>
typeof response === 'object' &&
response !== null &&
'maskedValue' in response &&
!!(response as { maskedValue: string }).maskedValue;
export const getDefaultDictationSettings = async (
getProviders: (refresh: boolean) => Promise<Array<{ name: string; is_configured: boolean }>>
ui/desktop/src/hooks/useDictationSettings.ts
+27 -14
View File
@@ -3,19 +3,27 @@ import { useConfig } from '../components/ConfigContext';
import {
DICTATION_SETTINGS_KEY,
ELEVENLABS_API_KEY,
DICTATION_PROVIDER_ELEVENLABS,
getDefaultDictationSettings,
isSecretKeyConfigured,
} from './dictationConstants';
export type DictationProvider = 'openai' | 'elevenlabs' | null;
export type DictationProvider = 'openai' | typeof DICTATION_PROVIDER_ELEVENLABS | null;
export interface DictationSettings {
enabled: boolean;
provider: DictationProvider;
}
let elevenLabsKeyCache: boolean | null = null;
export const setElevenLabsKeyCache = (value: boolean) => {
elevenLabsKeyCache = value;
};
export const useDictationSettings = () => {
const [settings, setSettings] = useState<DictationSettings | null>(null);
const [hasElevenLabsKey, setHasElevenLabsKey] = useState<boolean>(false);
const [hasElevenLabsKey, setHasElevenLabsKey] = useState<boolean>(elevenLabsKeyCache ?? false);
const { read, getProviders } = useConfig();
useEffect(() => {
@@ -23,22 +31,27 @@ export const useDictationSettings = () => {
// Load settings from localStorage
const saved = localStorage.getItem(DICTATION_SETTINGS_KEY);
let currentSettings: DictationSettings;
if (saved) {
const parsedSettings = JSON.parse(saved);
setSettings(parsedSettings);
currentSettings = JSON.parse(saved);
} else {
const defaultSettings = await getDefaultDictationSettings(getProviders);
setSettings(defaultSettings);
currentSettings = await getDefaultDictationSettings(getProviders);
}
// Load ElevenLabs API key from storage (non-secret for frontend access)
try {
const keyExists = await read(ELEVENLABS_API_KEY, true);
if (keyExists === true) {
setHasElevenLabsKey(true);
setSettings(currentSettings);
if (
currentSettings.provider === DICTATION_PROVIDER_ELEVENLABS &&
elevenLabsKeyCache === null
) {
try {
const response = await read(ELEVENLABS_API_KEY, true);
const hasKey = isSecretKeyConfigured(response);
elevenLabsKeyCache = hasKey;
setHasElevenLabsKey(hasKey);
} catch (error) {
elevenLabsKeyCache = false;
setHasElevenLabsKey(false);
console.error('[useDictationSettings] Error checking ElevenLabs API key:', error);
}
} catch (error) {
console.error('[useDictationSettings] Error loading ElevenLabs API key:', error);
}
};
ui/desktop/src/hooks/useWhisper.ts
+4 -2
View File
@@ -2,6 +2,7 @@ import { useState, useRef, useCallback, useEffect } from 'react';
import { useConfig } from '../components/ConfigContext';
import { getApiUrl } from '../config';
import { useDictationSettings } from './useDictationSettings';
import { DICTATION_PROVIDER_ELEVENLABS } from './dictationConstants';
import { safeJsonParse } from '../utils/conversionUtils';
interface UseWhisperOptions {
@@ -77,7 +78,7 @@ export const useWhisper = ({ onTranscription, onError, onSizeWarning }: UseWhisp
case 'openai':
setCanUseDictation(hasOpenAIKey);
break;
case 'elevenlabs':
case DICTATION_PROVIDER_ELEVENLABS:
setCanUseDictation(hasElevenLabsKey);
break;
default:
@@ -180,7 +181,7 @@ export const useWhisper = ({ onTranscription, onError, onSizeWarning }: UseWhisp
case 'openai':
endpoint = '/audio/transcribe';
break;
case 'elevenlabs':
case DICTATION_PROVIDER_ELEVENLABS:
endpoint = '/audio/transcribe/elevenlabs';
break;
default:
@@ -373,5 +374,6 @@ export const useWhisper = ({ onTranscription, onError, onSizeWarning }: UseWhisp
stopRecording,
recordingDuration,
estimatedSize,
dictationSettings,
};
};