= ({
+ children
+}) => {
+ const chatStore = useChatStore()
+ const chatUIStore = useChatUIStore()
+ const { refreshChatSessions } = chatStore
+
+ useEffect(() => {
+ refreshChatSessions()
+ }, [refreshChatSessions])
+
+ const getContext = useCallbackRef(() => chatStore.context)
+
+ return (
+
+ {children}
+
+ )
+}
+
+export const withChatContext = (
+ WrappedComponent: React.ComponentType
+) => {
+ const WithChatContext: FC
= props => (
+
+
+
+ )
+
+ WithChatContext.displayName = `WithChatContext(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`
+
+ return WithChatContext
+}
diff --git a/src/webview/contexts/global-search-context.tsx b/src/webview/contexts/global-search-context.tsx
new file mode 100644
index 0000000..61e4181
--- /dev/null
+++ b/src/webview/contexts/global-search-context.tsx
@@ -0,0 +1,176 @@
+import React, { createContext, useContext, useState } from 'react'
+import type { ChatSession } from '@extension/webview-api/lowdb/chat-sessions-db'
+import { useQuery } from '@tanstack/react-query'
+import { GlobalSearch } from '@webview/components/global-search/global-search'
+import type { SettingItem } from '@webview/components/settings/settings'
+import { settingsConfig } from '@webview/components/settings/settings-config'
+import { api } from '@webview/services/api-client'
+import { useDebounce, useKey } from 'react-use'
+
+interface SearchResult {
+ type: 'chatSession' | 'setting'
+ item: ChatSession | SettingItem
+}
+
+interface GlobalSearchContextType {
+ searchQuery: string
+ setSearchQuery: (query: string) => void
+ searchResults: SearchResult[]
+ isSearching: boolean
+ isOpen: boolean
+ openSearch: () => void
+ closeSearch: () => void
+ activeCategory: string
+ setActiveCategory: (category: string) => void
+}
+
+const GlobalSearchContext = createContext(
+ undefined
+)
+
+export const useGlobalSearch = () => {
+ const context = useContext(GlobalSearchContext)
+ if (!context) {
+ throw new Error(
+ 'useGlobalSearch must be used within a GlobalSearchProvider'
+ )
+ }
+ return context
+}
+
+export const GlobalSearchProvider: React.FC = ({
+ children
+}) => {
+ const [isOpen, setIsOpen] = useState(false)
+ const [searchQuery, setSearchQuery] = useState('')
+ const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('')
+ const [activeCategory, setActiveCategory] = useState('all')
+
+ useDebounce(
+ () => {
+ setDebouncedSearchQuery(searchQuery)
+ },
+ 300,
+ [searchQuery]
+ )
+
+ const openSearch = () => setIsOpen(true)
+ const closeSearch = () => {
+ setIsOpen(false)
+ setSearchQuery('')
+ setActiveCategory('')
+ }
+
+ const { data: searchResults = [], isLoading: isSearching } = useQuery({
+ queryKey: ['globalSearch', debouncedSearchQuery],
+ queryFn: async () => {
+ if (!debouncedSearchQuery) return []
+
+ const chatSessions = await api.chatSession.searchSessions({
+ query: debouncedSearchQuery
+ })
+ const settingsResults = searchSettings(debouncedSearchQuery)
+
+ return [
+ ...chatSessions.map(session => ({
+ type: 'chatSession' as const,
+ item: session
+ })),
+ ...settingsResults.map(setting => ({
+ type: 'setting' as const,
+ item: setting
+ }))
+ ]
+ },
+ enabled: debouncedSearchQuery.length > 0 && isOpen
+ })
+
+ const contextValue = {
+ searchQuery,
+ setSearchQuery,
+ searchResults,
+ isSearching,
+ isOpen,
+ openSearch,
+ closeSearch,
+ activeCategory,
+ setActiveCategory
+ }
+
+ return (
+
+
+ result.type === 'chatSession')
+ .map(result => {
+ const chatSession = result.item as ChatSession
+ return {
+ id: chatSession.id,
+ label: chatSession.title,
+ keywords: [chatSession.title],
+ onSelect: () => {
+ /* handle selection */
+ }
+ }
+ })
+ },
+ {
+ id: 'settings',
+ name: 'Settings',
+ items: searchResults
+ .filter(result => result.type === 'setting')
+ .map(result => ({
+ id: (result.item as SettingItem).key,
+ label: (result.item as SettingItem).label,
+ onSelect: () => {
+ /* handle selection */
+ }
+ }))
+ }
+ ]}
+ open={isOpen}
+ onOpenChange={setIsOpen}
+ activeCategory={activeCategory}
+ onActiveCategoryChange={setActiveCategory}
+ searchQuery={searchQuery}
+ onSearchQueryChange={setSearchQuery}
+ />
+ {children}
+
+
+ )
+}
+
+const searchSettings = (query: string): SettingItem[] => {
+ const allSettings = settingsConfig.categories.flatMap(
+ category => category.settings || []
+ )
+ return allSettings.filter(
+ setting =>
+ setting.label.toLowerCase().includes(query.toLowerCase()) ||
+ setting.description.toLowerCase().includes(query.toLowerCase())
+ )
+}
+
+const GlobalSearchListener: React.FC = ({
+ children
+}) => {
+ const { openSearch } = useGlobalSearch()
+
+ useKey(
+ event => (event.metaKey || event.ctrlKey) && event.key === 'k',
+ event => {
+ event.preventDefault()
+ openSearch()
+ },
+ { event: 'keydown' }
+ )
+
+ return <>{children}
+}
diff --git a/src/webview/contexts/plugin-registry-context.tsx b/src/webview/contexts/plugin-registry-context.tsx
index 86203f5..3b77d66 100644
--- a/src/webview/contexts/plugin-registry-context.tsx
+++ b/src/webview/contexts/plugin-registry-context.tsx
@@ -7,14 +7,14 @@ import React, {
} from 'react'
import { ClientPluginRegistry } from '@shared/plugins/base/client/client-plugin-registry'
import { createClientPlugins } from '@shared/plugins/base/client/create-client-plugins'
-import type { PluginId } from '@shared/plugins/base/types'
+import { PluginId } from '@shared/plugins/base/types'
import { useQueryClient } from '@tanstack/react-query'
import { useAsyncEffect } from '@webview/hooks/use-async-effect'
import { useCallbackRef } from '@webview/hooks/use-callback-ref'
-import { useImmer } from 'use-immer'
+import { useImmer, type DraftFunction } from 'use-immer'
const PluginRegistryContext = createContext<{
- pluginRegistry: ClientPluginRegistry | null
+ pluginRegistryRef: React.RefObject
isPluginRegistryLoaded: boolean
} | null>(null)
@@ -30,11 +30,14 @@ export const PluginRegistryProvider: FC = ({
const getState = useCallbackRef(
(pluginId: PluginId) => pluginStates[pluginId] || {}
)
- const setState = useCallbackRef((pluginId: PluginId, newState: any) => {
- updatePluginStates(draft => {
- draft[pluginId] = newState
- })
- })
+ const setState = useCallbackRef(
+ (pluginId: PluginId, newState: any | DraftFunction) => {
+ updatePluginStates(draft => {
+ draft[pluginId] = newState
+ })
+ }
+ )
+
const pluginRegistryRef = useRef(null)
useAsyncEffect(
@@ -61,11 +64,18 @@ export const PluginRegistryProvider: FC = ({
[getState, setState]
)
+ // eslint-disable-next-line react-compiler/react-compiler
+ if (isLoaded && pluginRegistryRef.current) {
+ // eslint-disable-next-line react-compiler/react-compiler
+ pluginRegistryRef.current!.getState = (pluginId: PluginId) =>
+ pluginStates[pluginId] || {}
+ }
+
return (
diff --git a/src/webview/contexts/providers.tsx b/src/webview/contexts/providers.tsx
index 9c8e454..92199d0 100644
--- a/src/webview/contexts/providers.tsx
+++ b/src/webview/contexts/providers.tsx
@@ -6,6 +6,8 @@ import { Toaster } from '@webview/components/ui/sonner'
import { createQueryClient } from '@webview/services/react-query/query-client'
import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import { GlobalSearchProvider } from './global-search-context'
+
export function Providers({ children }: React.PropsWithChildren) {
const queryClientRef = useRef(null)
if (!queryClientRef.current) {
@@ -22,7 +24,7 @@ export function Providers({ children }: React.PropsWithChildren) {
- {children}
+ {children}
diff --git a/src/webview/hooks/chat/use-chat-context-manager.ts b/src/webview/hooks/chat/use-chat-context-manager.ts
deleted file mode 100644
index 4510f60..0000000
--- a/src/webview/hooks/chat/use-chat-context-manager.ts
+++ /dev/null
@@ -1,291 +0,0 @@
-import {
- code,
- content,
- content2
-} from '@webview/components/chat/messages/markdown/test-data'
-import {
- ChatContextType,
- type ChatContext,
- type Conversation
-} from '@webview/types/chat'
-import { useImmer } from 'use-immer'
-import { v4 as uuidv4 } from 'uuid'
-
-// eslint-disable-next-line unused-imports/no-unused-vars
-const mockData = [
- { id: '1', createdAt: 1625234567890, role: 'human', contents: 'Hello!' },
- {
- id: '2',
- createdAt: 1625234567891,
- role: 'ai',
- contents: [
- {
- type: 'text',
- text: 'Hi there! How can I assist you today? Hi there! How can I assist you today? Hi there! How can I assist you today? Hi there! How can I assist you today? Hi there! How can I assist you today?'
- }
- ]
- },
- {
- id: '3',
- createdAt: 1625234567892,
- role: 'human',
- contents: [
- {
- type: 'text',
- text: 'What’s the weather like?'
- }
- ]
- },
- {
- id: '4',
- createdAt: 1625234567893,
- role: 'ai',
- contents: [
- {
- type: 'text',
- text: 'It’s sunny and warm today.'
- }
- ]
- },
- {
- id: '5',
- createdAt: 1625234567894,
- role: 'human',
- contents: [
- {
- type: 'text',
- text: 'Thank you!'
- }
- ]
- },
- {
- id: '6',
- createdAt: 1625234567895,
- role: 'ai',
- // contents: 'You’re welcome!'
- contents: [
- {
- type: 'text',
- text: 'You’re welcome!'
- }
- ]
- },
- {
- id: '7',
- createdAt: 1625234567896,
- role: 'human',
- contents: [
- {
- type: 'text',
- text: 'Can you tell me a joke?Can you tell me a joke?Can you tell me a joke?Can you tell me a joke?Can you tell me a joke?Can you tell me a joke?'
- }
- ]
- },
- {
- id: '8',
- createdAt: 1625234567897,
- role: 'ai',
- contents: [
- {
- type: 'text',
- text: 'Why don’t scientists trust atoms? Because they make up everything!'
- }
- ]
- },
- {
- id: '9',
- createdAt: 1625234567898,
- role: 'human',
- contents: [
- {
- type: 'text',
- text: 'Haha, that’s a good one.'
- }
- ]
- },
- {
- id: '10',
- createdAt: 1625234567899,
- role: 'ai',
- contents: [
- {
- type: 'text',
- text: 'Glad you liked it!'
- }
- ]
- },
- {
- id: '11',
- createdAt: 1625234567900,
- role: 'human',
- contents: [
- {
- type: 'text',
- text: 'What’s your favorite color?'
- }
- ]
- },
- {
- id: '12',
- createdAt: 1625234567901,
- role: 'ai',
- contents: [
- {
- type: 'text',
- text: 'I like blue. It reminds me of the sky.'
- }
- ]
- },
- {
- id: '13',
- createdAt: 1625234567902,
- role: 'human',
- contents: [
- {
- type: 'text',
- text: 'Do you have any hobbies?'
- }
- ]
- },
- {
- id: '14',
- createdAt: 1625234567903,
- role: 'ai',
- contents: [
- {
- type: 'text',
- text: 'I enjoy learning new things and helping people!'
- }
- ]
- },
- {
- id: '15',
- createdAt: 1625234567904,
- role: 'human',
- contents: [
- {
- type: 'text',
- text: 'That’s great to hear.'
- }
- ]
- },
- { id: '16', createdAt: 1625234567905, role: 'ai', contents: code },
- {
- id: '17',
- createdAt: 1625234567906,
- role: 'human',
- contents: [
- {
- type: 'text',
- text: 'What’s the capital of France?'
- }
- ]
- },
- {
- id: '18',
- createdAt: 1625234567907,
- role: 'ai',
- contents: [
- {
- type: 'text',
- text: content
- }
- ]
- },
- {
- id: '19',
- createdAt: 1625234567908,
- role: 'human',
- contents: [
- {
- type: 'text',
- text: 'I appreciate your help.'
- }
- ]
- },
- {
- id: '20',
- createdAt: 1625234567909,
- role: 'ai',
- contents: [
- {
- type: 'text',
- text: content2
- }
- ]
- },
- {
- id: '21',
- createdAt: 1625234567910,
- role: 'human',
- contents: [
- {
- type: 'text',
- text: 'What’s 2 + 2?'
- }
- ]
- },
- {
- id: '22',
- createdAt: 1625234567911,
- role: 'ai',
- contents: [
- {
- type: 'text',
- text: '2 + 2 equals 4.'
- }
- ]
- }
-] as Conversation[]
-
-export const useChatContextManager = () => {
- const [context, setContext] = useImmer(() => ({
- id: uuidv4(),
- type: ChatContextType.Chat,
- createdAt: Date.now(),
- updatedAt: Date.now(),
- settings: {
- allowLongFileScan: false,
- explicitContext: '总是用中文回复',
- fastApplyModelName: 'gpt-4o-mini',
- modelName: 'gpt-4o',
- useFastApply: true
- },
- conversations: [] // [...mockData]
- }))
-
- const getConversation = (id: string) =>
- context.conversations.find(conversation => conversation.id === id)
-
- const addConversation = (conversation: Conversation) => {
- setContext(draft => {
- draft.conversations.push(conversation)
- })
- }
-
- const updateConversation = (id: string, conversation: Conversation) => {
- setContext(draft => {
- const index = draft.conversations.findIndex(
- conversation => conversation.id === id
- )
- draft.conversations[index] = conversation
- })
- }
-
- const deleteConversation = (id: string) => {
- setContext(draft => {
- draft.conversations = draft.conversations.filter(
- conversation => conversation.id !== id
- )
- })
- }
-
- return {
- context,
- setContext,
- getConversation,
- addConversation,
- updateConversation,
- deleteConversation
- }
-}
diff --git a/src/webview/hooks/chat/use-chat-sessions-ui.ts b/src/webview/hooks/chat/use-chat-sessions-ui.ts
new file mode 100644
index 0000000..691c047
--- /dev/null
+++ b/src/webview/hooks/chat/use-chat-sessions-ui.ts
@@ -0,0 +1,29 @@
+import { useEffect } from 'react'
+import { convertChatContextToChatSession } from '@shared/utils/convert-chat-context-to-chat-session'
+import { useChatContext } from '@webview/contexts/chat-context'
+
+export const useChatSessionsUI = () => {
+ const { context, chatSessions, switchSession } = useChatContext()
+
+ const isCurrentSessionInChatSessions =
+ chatSessions?.some(session => session.id === context.id) ?? false
+
+ const currentSession = convertChatContextToChatSession(context)
+
+ const chatSessionForRender = (
+ isCurrentSessionInChatSessions ? [...chatSessions]! : [currentSession]
+ ).sort((a, b) => b.updatedAt - a.updatedAt)
+
+ useEffect(() => {
+ if (chatSessions?.length && !isCurrentSessionInChatSessions) {
+ const lastSession = [...chatSessions].sort(
+ (a, b) => b.updatedAt - a.updatedAt
+ )[0]!
+ switchSession(lastSession.id)
+ }
+ }, [chatSessions, isCurrentSessionInChatSessions, switchSession])
+
+ return {
+ chatSessionForRender
+ }
+}
diff --git a/src/webview/hooks/chat/use-chat-state.ts b/src/webview/hooks/chat/use-chat-state.ts
index d3b468b..23b3c00 100644
--- a/src/webview/hooks/chat/use-chat-state.ts
+++ b/src/webview/hooks/chat/use-chat-state.ts
@@ -1,11 +1,21 @@
-import type { ChatContext, Conversation } from '@webview/types/chat'
+import { useMemo } from 'react'
+import type { Conversation } from '@shared/types/chat-context'
+import { useChatContext } from '@webview/contexts/chat-context'
+import type { ConversationUIState } from '@webview/types/chat'
+import type { DraftFunction } from 'use-immer'
-import { useChatContextManager } from './use-chat-context-manager'
import { useConversation } from './use-conversation'
-import { useConversationsWithUIState } from './use-conversations-with-ui-state'
export const useChatState = () => {
- const { context, setContext } = useChatContextManager()
+ const {
+ context,
+ setContext,
+ addConversation,
+ getConversationUIState,
+ setConversationUIState,
+ batchSetConversationUIState
+ } = useChatContext()
+
const {
conversation: newConversation,
setConversation: setNewConversation,
@@ -14,64 +24,76 @@ export const useChatState = () => {
const allConversations = [...context.conversations, newConversation]
- const {
- conversationsWithUIState,
- getConversationUIState,
- setConversationUIState,
- setAllConversationsUIState
- } = useConversationsWithUIState({
- conversations: allConversations
- })
+ const conversationsWithUIState = allConversations.map(conversation => ({
+ ...conversation,
+ uiState: getConversationUIState(context.id, conversation.id)
+ }))
const historiesConversationsWithUIState = conversationsWithUIState.filter(
c => c.id !== newConversation.id
)
- const newConversationUIState = getConversationUIState(newConversation.id)
-
- const replaceConversationAndTruncate = (
- conversation: Conversation
- ): Promise =>
- new Promise(resolve => {
- setContext(draft => {
- const index = draft.conversations.findIndex(
- c => c.id === conversation.id
- )
+ const newConversationUIState = useMemo(
+ () => getConversationUIState(context.id, newConversation.id),
+ [context, newConversation.id]
+ )
- // delete current conversation and all conversations after it
- index !== -1 && draft.conversations.splice(index)
+ const replaceConversationAndTrimHistory = (conversation: Conversation) => {
+ setContext(draft => {
+ const index = draft.conversations.findIndex(c => c.id === conversation.id)
- // add new conversation
- draft.conversations.push(conversation)
+ // delete current conversation and all conversations after it
+ index !== -1 && draft.conversations.splice(index)
- // Create a copy of the updated context to resolve the promise
- const updatedContext = JSON.parse(JSON.stringify(draft))
- resolve(updatedContext)
- })
+ // add new conversation
+ draft.conversations.push(conversation)
})
+ }
- const setUIStateForSending = (conversationId: string) => {
- setAllConversationsUIState({ sendButtonDisabled: true })
- setConversationUIState(conversationId, { isLoading: true })
+ const setAllConversationsUIState = (
+ uiStateOrUpdater: ConversationUIState | DraftFunction
+ ) => {
+ batchSetConversationUIState(
+ context.id,
+ allConversations.map(c => c.id),
+ uiStateOrUpdater
+ )
}
- const resetUIStateAfterSending = (conversationId: string) => {
- setAllConversationsUIState({ sendButtonDisabled: false })
- setConversationUIState(conversationId, {
- isLoading: false,
- isEditMode: false
+ const prepareUIForSending = (conversationId: string) => {
+ setAllConversationsUIState(draft => {
+ draft.sendButtonDisabled = true
+ })
+ setConversationUIState(context.id, conversationId, draft => {
+ draft.isLoading = true
})
}
- const setConversationEditMode = (
+ const resetUIAfterSending = (conversationId: string) => {
+ setAllConversationsUIState(draft => {
+ draft.sendButtonDisabled = false
+ })
+ setConversationUIState(context.id, conversationId, draft => {
+ draft.isLoading = false
+ draft.isEditMode = false
+ })
+ }
+
+ const toggleConversationEditMode = (
conversationId: string,
isEditMode: boolean
) => {
if (!isEditMode) {
- setConversationUIState(conversationId, { isEditMode: false })
+ setConversationUIState(context.id, conversationId, draft => {
+ draft.isEditMode = false
+ })
} else {
- setAllConversationsUIState({ isEditMode: false })
- setConversationUIState(conversationId, { isEditMode: true })
+ setAllConversationsUIState(draft => {
+ draft.isEditMode = false
+ })
+ setConversationUIState(context.id, conversationId, draft => {
+ draft.isEditMode = true
+ })
}
}
@@ -84,9 +106,10 @@ export const useChatState = () => {
conversationsWithUIState,
historiesConversationsWithUIState,
newConversationUIState,
- replaceConversationAndTruncate,
- setUIStateForSending,
- resetUIStateAfterSending,
- setConversationEditMode
+ replaceConversationAndTrimHistory,
+ prepareUIForSending,
+ resetUIAfterSending,
+ toggleConversationEditMode,
+ addConversation
}
}
diff --git a/src/webview/hooks/chat/use-conversations-with-ui-state.ts b/src/webview/hooks/chat/use-conversations-with-ui-state.ts
deleted file mode 100644
index 249aab8..0000000
--- a/src/webview/hooks/chat/use-conversations-with-ui-state.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import type { Conversation, ConversationUIState } from '@webview/types/chat'
-import { useImmer } from 'use-immer'
-
-export interface UseConversationsWithUIStateOptions {
- conversations: Conversation[]
-}
-
-export const useConversationsWithUIState = (
- options: UseConversationsWithUIStateOptions
-) => {
- const { conversations } = options
- const [conversationIdUIStateMap, setConversationIdUIStateMap] = useImmer<
- Record
- >({})
-
- const conversationsWithUIState = conversations.map(conversation => ({
- ...conversation,
- uiState:
- conversationIdUIStateMap[conversation.id] ||
- ({} satisfies ConversationUIState)
- }))
-
- const getConversationUIState = (conversationId: string) =>
- conversationIdUIStateMap[conversationId] ||
- ({} satisfies ConversationUIState)
-
- const setConversationUIState = (
- conversationId: string,
- uiState: Partial
- ) => {
- setConversationIdUIStateMap(draft => {
- draft[conversationId] = {
- ...draft[conversationId],
- ...uiState
- }
- })
- }
-
- const setAllConversationsUIState = (
- uiState: Partial
- ) => {
- setConversationIdUIStateMap(draft => {
- conversations.forEach(conversation => {
- draft[conversation.id] = {
- ...draft[conversation.id],
- ...uiState
- }
- })
- })
- }
-
- return {
- conversationsWithUIState,
- conversationIdUIStateMap,
- setConversationIdUIStateMap,
- getConversationUIState,
- setConversationUIState,
- setAllConversationsUIState
- }
-}
diff --git a/src/webview/hooks/chat/use-mention-options.tsx b/src/webview/hooks/chat/use-mention-options.tsx
index 50e7936..00dd21d 100644
--- a/src/webview/hooks/chat/use-mention-options.tsx
+++ b/src/webview/hooks/chat/use-mention-options.tsx
@@ -2,12 +2,13 @@ import { useQuery } from '@tanstack/react-query'
import { usePluginRegistry } from '@webview/contexts/plugin-registry-context'
export const useMentionOptions = () => {
- const { pluginRegistry, isPluginRegistryLoaded } = usePluginRegistry()
+ const { pluginRegistryRef, isPluginRegistryLoaded } = usePluginRegistry()
const { data: mentionOptions = [] } = useQuery({
queryKey: ['realtime', 'useMentionOptions', isPluginRegistryLoaded],
queryFn: async () => {
- const editorProvider = pluginRegistry?.providerManagers.editor.mergeAll()
+ const editorProvider =
+ pluginRegistryRef.current?.providerManagers.editor.mergeAll()
const result = (await editorProvider?.getMentionOptions?.()) || []
return result
diff --git a/src/webview/hooks/chat/use-plugin-providers.ts b/src/webview/hooks/chat/use-plugin-providers.ts
index e26078f..7e8c00d 100644
--- a/src/webview/hooks/chat/use-plugin-providers.ts
+++ b/src/webview/hooks/chat/use-plugin-providers.ts
@@ -2,9 +2,9 @@ import { useMemo } from 'react'
import { usePluginRegistry } from '@webview/contexts/plugin-registry-context'
export const usePluginEditorProviders = () => {
- const { pluginRegistry, isPluginRegistryLoaded } = usePluginRegistry()
+ const { pluginRegistryRef, isPluginRegistryLoaded } = usePluginRegistry()
const merged = useMemo(
- () => pluginRegistry?.providerManagers.editor.mergeAll() || {},
+ () => pluginRegistryRef.current?.providerManagers.editor.mergeAll() || {},
[isPluginRegistryLoaded]
)
@@ -12,19 +12,25 @@ export const usePluginEditorProviders = () => {
}
export const usePluginFilesSelectorProviders = () => {
- const { pluginRegistry, isPluginRegistryLoaded } = usePluginRegistry()
+ const { pluginRegistryRef, isPluginRegistryLoaded } = usePluginRegistry()
const merged = useMemo(
- () => pluginRegistry?.providerManagers.filesSelector.mergeAll() || {},
+ () =>
+ pluginRegistryRef.current?.providerManagers.filesSelector.mergeAll() ||
+ {},
[isPluginRegistryLoaded]
)
- return merged
+ const selectedFiles = merged.getSelectedFiles?.() || []
+
+ return { ...merged, selectedFiles }
}
export const usePluginImagesSelectorProviders = () => {
- const { pluginRegistry, isPluginRegistryLoaded } = usePluginRegistry()
+ const { pluginRegistryRef, isPluginRegistryLoaded } = usePluginRegistry()
const merged = useMemo(
- () => pluginRegistry?.providerManagers.imagesSelector.mergeAll() || {},
+ () =>
+ pluginRegistryRef.current?.providerManagers.imagesSelector.mergeAll() ||
+ {},
[isPluginRegistryLoaded]
)
@@ -32,9 +38,9 @@ export const usePluginImagesSelectorProviders = () => {
}
export const usePluginStates = () => {
- const { pluginRegistry, isPluginRegistryLoaded } = usePluginRegistry()
+ const { pluginRegistryRef, isPluginRegistryLoaded } = usePluginRegistry()
const states = useMemo(
- () => pluginRegistry?.providerManagers.state.getAll() || {},
+ () => pluginRegistryRef.current?.providerManagers.state.getAll() || {},
[isPluginRegistryLoaded]
)
diff --git a/src/webview/hooks/use-keyboard-navigation.ts b/src/webview/hooks/use-keyboard-navigation.ts
index 1920087..6889aac 100644
--- a/src/webview/hooks/use-keyboard-navigation.ts
+++ b/src/webview/hooks/use-keyboard-navigation.ts
@@ -1,5 +1,7 @@
import React, { RefObject, useState } from 'react'
+import { useCallbackRef } from './use-callback-ref'
+
interface UseKeyboardNavigationProps {
itemCount: number
itemRefs: RefObject<(HTMLElement | null)[]>
@@ -129,18 +131,20 @@ export const useKeyboardNavigation = (props: UseKeyboardNavigationProps) => {
}
}
+ const getFocusedIndex = useCallbackRef(() => focusedIndex)
+
// for list item hover
- const handleMouseOver = (event: React.MouseEvent) => {
+ const handleMouseMove = (event: React.MouseEvent) => {
event.stopPropagation()
event.preventDefault()
- const target = event.relatedTarget as HTMLElement
+ const target = (event.relatedTarget || event.target) as HTMLElement
const index =
itemRefs.current?.findIndex(
el => el === target || el?.contains(target)
) ?? -1
- if (index === -1 || index === focusedIndex) return
+ if (index === -1 || index === getFocusedIndex()) return
setFocusedIndex(index)
}
@@ -150,7 +154,7 @@ export const useKeyboardNavigation = (props: UseKeyboardNavigationProps) => {
setFocusedIndex,
handleKeyDown,
listEventHandlers: {
- onMouseOver: handleMouseOver
+ onMouseMove: handleMouseMove
}
}
}
diff --git a/src/webview/main.tsx b/src/webview/main.tsx
index 8d0001c..e1ea72b 100644
--- a/src/webview/main.tsx
+++ b/src/webview/main.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
+import { HashRouter } from 'react-router-dom'
import { getSocketPort } from './services/api-client/get-socket-port'
@@ -17,9 +17,9 @@ async function main() {
ReactDOM.createRoot(document.getElementById('app')!).render(
-
+
-
+
)
}
diff --git a/src/webview/stores/chat-store.ts b/src/webview/stores/chat-store.ts
new file mode 100644
index 0000000..46f7d6a
--- /dev/null
+++ b/src/webview/stores/chat-store.ts
@@ -0,0 +1,152 @@
+import { api } from '@webview/services/api-client'
+import {
+ ChatContext,
+ ChatContextType,
+ ChatSession,
+ Conversation
+} from '@webview/types/chat'
+import { getErrorMsg } from '@webview/utils/common'
+import { logger } from '@webview/utils/logger'
+import { produce } from 'immer'
+import { toast } from 'sonner'
+import type { DraftFunction } from 'use-immer'
+import { v4 as uuidv4 } from 'uuid'
+import { create } from 'zustand'
+import { immer } from 'zustand/middleware/immer'
+
+const createDefaultContext = (): ChatContext => ({
+ id: uuidv4(),
+ type: ChatContextType.Chat,
+ createdAt: Date.now(),
+ updatedAt: Date.now(),
+ settings: {
+ allowLongFileScan: false,
+ explicitContext: '总是用中文回复',
+ fastApplyModelName: 'gpt-4o-mini',
+ modelName: 'gpt-4o',
+ useFastApply: true
+ },
+ conversations: []
+})
+
+export type ChatStore = {
+ context: ChatContext
+ chatSessions: ChatSession[]
+ setContext: (
+ contextOrUpdater: ChatContext | DraftFunction
+ ) => void
+ getConversation: (id: string) => Conversation | undefined
+ addConversation: (conversation: Conversation) => void
+ updateConversation: (id: string, conversation: Conversation) => void
+ deleteConversation: (id: string) => void
+ resetContext: () => void
+ saveSession: () => Promise
+ refreshChatSessions: () => Promise
+ createAndSwitchToNewSession: () => Promise
+ deleteSession: (id: string) => Promise
+ switchSession: (sessionId: string) => Promise
+}
+
+export const useChatStore = create()(
+ immer((set, get) => ({
+ context: createDefaultContext(),
+ chatSessions: [] as ChatSession[],
+ setContext: contextOrUpdater => {
+ if (typeof contextOrUpdater === 'function') {
+ const newContext = produce(get().context, contextOrUpdater)
+
+ set(state => {
+ state.context = newContext
+ })
+ } else {
+ set(state => {
+ state.context = contextOrUpdater
+ })
+ }
+ },
+ getConversation: id => get().context.conversations.find(c => c.id === id),
+ addConversation: conversation =>
+ set(state => {
+ state.context.conversations.push(conversation)
+ }),
+ updateConversation: (id, conversation) =>
+ set(state => {
+ const index = state.context.conversations.findIndex(c => c.id === id)
+ if (index !== -1) {
+ state.context.conversations[index] = conversation
+ }
+ }),
+ deleteConversation: id =>
+ set(state => {
+ state.context.conversations = state.context.conversations.filter(
+ c => c.id !== id
+ )
+ }),
+ resetContext: () => set({ context: createDefaultContext() }),
+ saveSession: async () => {
+ try {
+ await api.chatSession.createOrUpdateSession({
+ chatContext: get().context
+ })
+ await get().refreshChatSessions()
+ } catch (error) {
+ logger.error('Failed to save session', error)
+ toast.error(`Failed to save session: ${getErrorMsg(error)}`)
+ }
+ },
+ refreshChatSessions: async () => {
+ try {
+ const sessions = await api.chatSession.getAllSessions({})
+ set(state => {
+ state.chatSessions = sessions.sort(
+ (a, b) => b.updatedAt - a.updatedAt
+ )
+ })
+ } catch (error) {
+ logger.error('Failed to refresh chat sessions', error)
+ toast.error(`Failed to refresh chat sessions: ${getErrorMsg(error)}`)
+ }
+ },
+ createAndSwitchToNewSession: async () => {
+ try {
+ const newContext = createDefaultContext()
+ const newSession = await api.chatSession.createSession({
+ chatContext: newContext
+ })
+ await get().refreshChatSessions()
+ await get().switchSession(newSession.id)
+ logger.log('New chat created')
+ } catch (error) {
+ logger.error('Failed to create and switch to new chat', error)
+ }
+ },
+ deleteSession: async id => {
+ try {
+ await api.chatSession.deleteSession({ sessionId: id })
+ await get().refreshChatSessions()
+ if (get().context.id === id && get().chatSessions.length) {
+ get().switchSession(get().chatSessions[0]!.id)
+ }
+
+ logger.log(`Chat ${id} deleted`)
+ } catch (error) {
+ logger.error(`Failed to delete chat ${id}`, error)
+ }
+ },
+ switchSession: async sessionId => {
+ try {
+ if (get().context.id === sessionId) return
+ const fullChatContext = await api.chatSession.getChatContext({
+ sessionId
+ })
+ if (!fullChatContext) throw new Error('Chat context not found')
+ set({ context: fullChatContext })
+ } catch (error) {
+ logger.error(`Failed to switch to session ${sessionId}`, error)
+ toast.error(
+ `Failed to switch to session ${sessionId}: ${getErrorMsg(error)}`
+ )
+ }
+ }
+ }))
+)
diff --git a/src/webview/stores/chat-ui-store.ts b/src/webview/stores/chat-ui-store.ts
new file mode 100644
index 0000000..4fbc3d5
--- /dev/null
+++ b/src/webview/stores/chat-ui-store.ts
@@ -0,0 +1,99 @@
+import { ConversationUIState } from '@webview/types/chat'
+import { produce } from 'immer'
+import type { DraftFunction } from 'use-immer'
+import { create } from 'zustand'
+import { immer } from 'zustand/middleware/immer'
+
+export type ChatUIStore = {
+ sessionConversationUIStateMap: Record
+ getConversationUIState: (
+ sessionId: string,
+ conversationId: string
+ ) => ConversationUIState
+ setConversationUIState: (
+ sessionId: string,
+ conversationId: string,
+ uiStateOrUpdater: ConversationUIState | DraftFunction
+ ) => void
+ batchSetConversationUIState: (
+ sessionId: string,
+ conversationIds: string[],
+ uiStateOrUpdater: ConversationUIState | DraftFunction
+ ) => void
+}
+
+export const useChatUIStore = create()(
+ immer((set, get) => ({
+ sessionConversationUIStateMap: {},
+ getConversationUIState: (sessionId: string, conversationId: string) =>
+ get().sessionConversationUIStateMap[`${sessionId}_${conversationId}`] ||
+ ({} as ConversationUIState),
+ setConversationUIState: (
+ sessionId: string,
+ conversationId: string,
+ uiStateOrUpdater: ConversationUIState | DraftFunction
+ ) => {
+ const id = `${sessionId}_${conversationId}`
+
+ if (typeof uiStateOrUpdater === 'function') {
+ const newUIState = produce(
+ get().sessionConversationUIStateMap[id] || {},
+ uiStateOrUpdater
+ )
+ set(state => {
+ if (!state.sessionConversationUIStateMap[id]) {
+ state.sessionConversationUIStateMap[id] = {}
+ }
+
+ state.sessionConversationUIStateMap[id] = newUIState
+ })
+ } else {
+ set(state => {
+ if (!state.sessionConversationUIStateMap[id]) {
+ state.sessionConversationUIStateMap[id] = {}
+ }
+
+ state.sessionConversationUIStateMap[id] = uiStateOrUpdater
+ })
+ }
+ },
+ batchSetConversationUIState: (
+ sessionId: string,
+ conversationIds: string[],
+ uiStateOrUpdater: ConversationUIState | DraftFunction
+ ) => {
+ if (typeof uiStateOrUpdater === 'function') {
+ const idUIStateMap = conversationIds.map(conversationId => {
+ const id = `${sessionId}_${conversationId}`
+ return {
+ id,
+ uiState: produce(
+ get().sessionConversationUIStateMap[id] || {},
+ uiStateOrUpdater
+ )
+ }
+ })
+
+ set(state => {
+ idUIStateMap.forEach(({ id, uiState }) => {
+ if (!state.sessionConversationUIStateMap[id]) {
+ state.sessionConversationUIStateMap[id] = {}
+ }
+
+ state.sessionConversationUIStateMap[id] = uiState
+ })
+ })
+ } else {
+ set(state => {
+ conversationIds.forEach(conversationId => {
+ const id = `${sessionId}_${conversationId}`
+ if (!state.sessionConversationUIStateMap[id]) {
+ state.sessionConversationUIStateMap[id] = {}
+ }
+ state.sessionConversationUIStateMap[id] = uiStateOrUpdater
+ })
+ })
+ }
+ }
+ }))
+)
diff --git a/src/webview/types/chat.ts b/src/webview/types/chat.ts
index d685c0e..db7424e 100644
--- a/src/webview/types/chat.ts
+++ b/src/webview/types/chat.ts
@@ -2,6 +2,7 @@ import type { FC } from 'react'
import type { Conversation } from '@shared/types/chat-context'
import type { MentionItemLayoutProps } from '@webview/components/chat/selectors/mention-selector/mention-item-layout'
+export type { ChatSession } from '@extension/webview-api/lowdb/chat-sessions-db'
export type { DocSite } from '@extension/webview-api/lowdb/doc-sites-db'
export type { ProgressInfo } from '@extension/webview-api/chat-context-processor/utils/process-reporter'
export * from '@shared/types/chat-context'
diff --git a/vite.config.mts b/vite.config.mts
index e4aa35e..10b4028 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -29,7 +29,8 @@ const define: Record = {
}
// https://vitejs.dev/config/
-export default defineConfig(() => {
+export default defineConfig(env => {
+ const isBuild = env.command === 'build'
process.env.APP_BUILD_TIME = `${Date.now()}`
process.env.APP_VERSION = pkg.version
@@ -46,7 +47,8 @@ export default defineConfig(() => {
svgr(),
pages({
dirs: 'src/webview/pages',
- routeStyle: 'next'
+ routeStyle: 'next',
+ importMode: 'sync'
}),
vscode({
extension: {
@@ -76,11 +78,22 @@ export default defineConfig(() => {
}
}
]
+ },
+ webview: {
+ csp: isBuild ? '' : undefined
}
})
],
resolve: {
dedupe: ['react', 'react-dom']
+ },
+ experimental: {
+ renderBuiltUrl(filename, { hostType }) {
+ if (hostType === 'js' && isBuild) {
+ return { runtime: `window.__assetsPath(${JSON.stringify(filename)})` }
+ }
+ return { relative: true }
+ }
}
}
})