From 0ed7ebd5e25a7234119bdbcc5bb709eb29c036bc Mon Sep 17 00:00:00 2001 From: Fang Yuan Date: Tue, 7 Jan 2025 10:12:04 +0800 Subject: [PATCH] feat: Refactoring bot chat page business code Signed-off-by: Fang Yuan --- frontend/src/components/Chatbot.tsx | 149 +++------------- frontend/src/hooks/useModelManagement.ts | 102 ----------- frontend/src/hooks/useOllama.ts | 160 ++++++++++++++++++ frontend/src/hooks/useOllamaInitialization.ts | 91 ---------- 4 files changed, 186 insertions(+), 316 deletions(-) delete mode 100644 frontend/src/hooks/useModelManagement.ts create mode 100644 frontend/src/hooks/useOllama.ts delete mode 100644 frontend/src/hooks/useOllamaInitialization.ts diff --git a/frontend/src/components/Chatbot.tsx b/frontend/src/components/Chatbot.tsx index 312dbfd..71e4ee4 100644 --- a/frontend/src/components/Chatbot.tsx +++ b/frontend/src/components/Chatbot.tsx @@ -3,8 +3,8 @@ import React, { useState, useRef, useEffect, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { Collapse, Card, Input, Button, Typography, Space, message, Modal, Progress, Select, Tag, Alert } from 'antd'; import { SendOutlined, UserOutlined, RobotOutlined, DeleteOutlined, ThunderboltOutlined } from '@ant-design/icons'; -import { StartChatbot, HasInitOllama, GetInitOllamaProgress, InitOllama, GetCurrentUseModel, GetSelectModelList, SetOllamaModel, GetSetOllamaModelProgress, InitSetOllamaModelTask } from '../../wailsjs/go/main/App'; -import { useModelChange } from '../context/ModelChangeContext'; +import { StartChatbot } from '../../wailsjs/go/main/App'; +import { useOllama } from '../hooks/useOllama'; const { Title, Text } = Typography; const { Option } = Select; @@ -22,36 +22,30 @@ const Chatbot: React.FC = () => { const messagesEndRef = useRef(null); const [isLoading, setIsLoading] = useState(false); - // 初始化状态 - const [hasContainer, setHasContainer] = useState(false); - const [showInitModel, setShowInitModel] = useState(false); - const [initProgress, setInitProgress] = useState(0); - const [isInitializing, setIsInitializing] = useState(false); - const [isCheckingStatus, setIsCheckingStatus] = useState(false); - - // 初始化 - const handleInitialize = useCallback(async () => { - if (!isInitializing) { - setIsInitializing(true); - setInitProgress(0); - InitOllama(); - } - }, [t]); - - const checkProgress = useCallback(async () => { - const result = await GetInitOllamaProgress(); - console.info("Checking init progress: ", result) - if (result.Exists) { - const progressPercentage = Math.min(Math.round((result.Completed / result.Total) * 100), 100); - setInitProgress(progressPercentage); - if (progressPercentage >= 100) { - setShowInitModel(false); - setIsInitializing(false); - setIsCheckingStatus(false); - } - } - checkCurrentStatus() - }, [t]); + const { + // 状态 + hasContainer, + showInitModel, + initProgress, + isInitializing, + isCheckingStatus, + isChangingModel, + modelChangeProgress, + currentModel, + modelList, + selectedModel, + // 状态修改 + setShowInitModel, + setSelectedModel, + // 功能函数 + handleInitialize, + checkProgress, + checkCurrentStatus, + getCurrentModel, + getModelList, + handleModelChange, + checkModelChangeProgress, + } = useOllama(); useEffect(() => { let intervalId: number | undefined; @@ -67,102 +61,11 @@ const Chatbot: React.FC = () => { }; }, [isInitializing, checkProgress]); - // 检查状态 - const checkCurrentStatus = useCallback(async () => { - const result = await HasInitOllama(); - console.info(result) - console.info({ - "initProgress": initProgress, "isInitializing": isInitializing, "isCheckingStatus": isCheckingStatus, "isChangingModel": isChangingModel, "modelChangeProgress": modelChangeProgress - }) - // 没有容器 - setShowInitModel(!result.Has); - setHasContainer(result.Has) - if (result.Has) { - // 正在初始化 - setIsInitializing(result.IsInit); - // 需要检查状态 - setIsCheckingStatus(result.IsInit || result.IsSetModel); - // 正在更改model - setIsChangingModel(result.IsSetModel) - } - }, [t]); - // 每次进入都要检查 useEffect(() => { checkCurrentStatus(); }, [checkCurrentStatus]); - // 切换model - const { isChangingModel, modelChangeProgress, setIsChangingModel, setModelChangeProgress } = useModelChange(); - const [currentModel, setCurrentModel] = useState(''); - const [modelList, setModelList] = useState([]); - const [selectedModel, setSelectedModel] = useState(null); - - const getCurrentModel = useCallback(async () => { - try { - const result = await GetCurrentUseModel(); - if (result.Model) { - setCurrentModel(result.Model); - } else { - console.error('No model returned from GetCurrentUseModel'); - message.error(t('chatbot.noModelError')); - } - } catch (error) { - console.error('Error getting current model:', error); - message.error(t('chatbot.getCurrentModelError')); - } - }, [t]); - - const getModelList = useCallback(async () => { - try { - const result = await GetSelectModelList(); - if (result.Models) { - setModelList(result.Models); - } else { - console.error('No model list returned from GetSelectModelList'); - message.error(t('chatbot.noModelListError')); - } - } catch (error) { - console.error('Error getting model list:', error); - message.error(t('chatbot.getModelListError')); - } - }, [t]); - - const handleModelChange = useCallback(async (value: string) => { - if (!isChangingModel) { - const result = await InitSetOllamaModelTask() - if (result.ErrorMsg.length > 0) { - message.error(t('chatbot.errorMessage')); - console.error(result.ErrorMsg) - return; - } - setIsChangingModel(true); - setIsCheckingStatus(true) - setModelChangeProgress(0); - SetOllamaModel(value); - checkModelChangeProgress(); - } - }, [t, setIsChangingModel, setModelChangeProgress]); - - - const checkModelChangeProgress = useCallback(async () => { - const result = await GetSetOllamaModelProgress(); - console.info("Checking model change progress: ", result) - if (result.Exists) { - const progressPercentage = Math.min(Math.round((result.Completed / result.Total) * 100), 100); - setModelChangeProgress(progressPercentage); - if (progressPercentage >= 100) { - setIsChangingModel(false); - setIsCheckingStatus(false) - getCurrentModel(); - setSelectedModel(null); - message.success(t('chatbot.modelChangeSuccess')); - return; - } - } - checkCurrentStatus() - }, [t]); - useEffect(() => { let intervalId: number | undefined; diff --git a/frontend/src/hooks/useModelManagement.ts b/frontend/src/hooks/useModelManagement.ts deleted file mode 100644 index 9285931..0000000 --- a/frontend/src/hooks/useModelManagement.ts +++ /dev/null @@ -1,102 +0,0 @@ -import { useState, useEffect, useCallback } from 'react'; -import { message } from 'antd'; -import { useTranslation } from 'react-i18next'; -import { GetCurrentUseModel, GetSelectModelList, SetOllamaModel, GetSetOllamaModelProgress } from '../../wailsjs/go/main/App'; -import { useModelChange } from '../context/ModelChangeContext'; - -export const useModelManagement = () => { - const { t } = useTranslation(); - const { isChangingModel, modelChangeProgress, setIsChangingModel, setModelChangeProgress } = useModelChange(); - const [currentModel, setCurrentModel] = useState(''); - const [modelList, setModelList] = useState([]); - const [selectedModel, setSelectedModel] = useState(null); - - const getCurrentModel = useCallback(async () => { - try { - const result = await GetCurrentUseModel(); - if (result.Model) { - setCurrentModel(result.Model); - } else { - console.error('No model returned from GetCurrentUseModel'); - message.error(t('chatbot.noModelError')); - } - } catch (error) { - console.error('Error getting current model:', error); - message.error(t('chatbot.getCurrentModelError')); - } - }, [t]); - - const getModelList = useCallback(async () => { - try { - const result = await GetSelectModelList(); - if (result.Models) { - setModelList(result.Models); - } else { - console.error('No model list returned from GetSelectModelList'); - message.error(t('chatbot.noModelListError')); - } - } catch (error) { - console.error('Error getting model list:', error); - message.error(t('chatbot.getModelListError')); - } - }, [t]); - - const handleModelChange = useCallback((value: string) => { - setIsChangingModel(true); - setModelChangeProgress(0); - try { - SetOllamaModel(value); - checkModelChangeProgress(); - } catch (error) { - console.error('Error initiating model change:', error); - message.error(t('chatbot.changeModelError')); - setIsChangingModel(false); - setSelectedModel(null); - } - }, [t, setIsChangingModel, setModelChangeProgress]); - - const checkModelChangeProgress = useCallback(() => { - const checkProgress = async () => { - try { - const result = await GetSetOllamaModelProgress(); - if (result.Exists) { - const progressPercentage = Math.min(Math.round((result.Completed / result.Total) * 100), 100); - setModelChangeProgress(progressPercentage); - if (progressPercentage >= 100) { - setIsChangingModel(false); - getCurrentModel(); - setSelectedModel(null); - message.success(t('chatbot.modelChangeSuccess')); - return; - } - setTimeout(checkProgress, 2000); - } else { - setIsChangingModel(false); - setSelectedModel(null); - message.error(t('chatbot.modelChangeNotStarted')); - } - } catch (error) { - console.error('Error checking model change progress:', error); - message.error(t('chatbot.modelChangeProgressError')); - setIsChangingModel(false); - setSelectedModel(null); - } - }; - checkProgress(); - }, [getCurrentModel, t, setIsChangingModel, setModelChangeProgress]); - - useEffect(() => { - getCurrentModel(); - getModelList(); - }, [getCurrentModel, getModelList]); - - return { - currentModel, - modelList, - selectedModel, - isChangingModel, - modelChangeProgress, - setSelectedModel, - handleModelChange, - }; -}; \ No newline at end of file diff --git a/frontend/src/hooks/useOllama.ts b/frontend/src/hooks/useOllama.ts new file mode 100644 index 0000000..3033b2d --- /dev/null +++ b/frontend/src/hooks/useOllama.ts @@ -0,0 +1,160 @@ +import { useState, useCallback } from 'react'; +import { message } from 'antd'; +import { useTranslation } from 'react-i18next'; +import { HasInitOllama, GetInitOllamaProgress, InitOllama, GetCurrentUseModel, GetSelectModelList, SetOllamaModel, GetSetOllamaModelProgress, InitSetOllamaModelTask } from '../../wailsjs/go/main/App'; +import { useModelChange } from '../context/ModelChangeContext'; + +export const useOllama = () => { + const { t } = useTranslation(); + // 初始化状态 + const [hasContainer, setHasContainer] = useState(false); + const [showInitModel, setShowInitModel] = useState(false); + const [initProgress, setInitProgress] = useState(0); + const [isInitializing, setIsInitializing] = useState(false); + const [isCheckingStatus, setIsCheckingStatus] = useState(false); + // 切换model + const { isChangingModel, modelChangeProgress, setIsChangingModel, setModelChangeProgress } = useModelChange(); + const [currentModel, setCurrentModel] = useState(''); + const [modelList, setModelList] = useState([]); + const [selectedModel, setSelectedModel] = useState(null); + + // 初始化 + const handleInitialize = useCallback(async () => { + if (!isInitializing) { + setIsInitializing(true); + setInitProgress(0); + InitOllama(); + } + }, [t]); + + // 检查初始化进度 + const checkProgress = useCallback(async () => { + const result = await GetInitOllamaProgress(); + console.info("Checking init progress: ", result) + if (result.Exists) { + const progressPercentage = Math.min(Math.round((result.Completed / result.Total) * 100), 100); + setInitProgress(progressPercentage); + if (progressPercentage >= 100) { + setShowInitModel(false); + setIsInitializing(false); + setIsCheckingStatus(false); + } + } + checkCurrentStatus() + }, [t]); + + // 检查当前所有状态 + const checkCurrentStatus = useCallback(async () => { + const result = await HasInitOllama(); + console.info(result) + console.info({ + "initProgress": initProgress, "isInitializing": isInitializing, "isCheckingStatus": isCheckingStatus, "isChangingModel": isChangingModel, "modelChangeProgress": modelChangeProgress + }) + // 没有容器 + setShowInitModel(!result.Has); + setHasContainer(result.Has) + if (result.Has) { + // 正在初始化 + setIsInitializing(result.IsInit); + // 需要检查状态 + setIsCheckingStatus(result.IsInit || result.IsSetModel); + // 正在更改model + setIsChangingModel(result.IsSetModel) + } + }, [t]); + + // 获取当前模型 + const getCurrentModel = useCallback(async () => { + try { + const result = await GetCurrentUseModel(); + if (result.Model) { + setCurrentModel(result.Model); + } else { + console.error('No model returned from GetCurrentUseModel'); + message.error(t('chatbot.noModelError')); + } + } catch (error) { + console.error('Error getting current model:', error); + message.error(t('chatbot.getCurrentModelError')); + } + }, [t]); + + // 获取模型列表 + const getModelList = useCallback(async () => { + try { + const result = await GetSelectModelList(); + if (result.Models) { + setModelList(result.Models); + } else { + console.error('No model list returned from GetSelectModelList'); + message.error(t('chatbot.noModelListError')); + } + } catch (error) { + console.error('Error getting model list:', error); + message.error(t('chatbot.getModelListError')); + } + }, [t]); + + // 修改模型 + const handleModelChange = useCallback(async (value: string) => { + if (!isChangingModel) { + const result = await InitSetOllamaModelTask() + if (result.ErrorMsg.length > 0) { + message.error(t('chatbot.errorMessage')); + console.error(result.ErrorMsg) + return; + } + setIsChangingModel(true); + setIsCheckingStatus(true) + setModelChangeProgress(0); + SetOllamaModel(value); + checkModelChangeProgress(); + } + }, [t, setIsChangingModel, setModelChangeProgress]); + + + // 检查模型切换进度 + const checkModelChangeProgress = useCallback(async () => { + const result = await GetSetOllamaModelProgress(); + console.info("Checking model change progress: ", result) + if (result.Exists) { + const progressPercentage = Math.min(Math.round((result.Completed / result.Total) * 100), 100); + setModelChangeProgress(progressPercentage); + if (progressPercentage >= 100) { + setIsChangingModel(false); + setIsCheckingStatus(false) + getCurrentModel(); + setSelectedModel(null); + message.success(t('chatbot.modelChangeSuccess')); + return; + } + } + checkCurrentStatus() + }, [t]); + + + return { + // 状态 + hasContainer, + showInitModel, + initProgress, + isInitializing, + isCheckingStatus, + isChangingModel, + modelChangeProgress, + currentModel, + modelList, + selectedModel, + // 状态修改 + setShowInitModel, + setSelectedModel, + // 功能函数 + handleInitialize, + checkProgress, + checkCurrentStatus, + getCurrentModel, + getModelList, + handleModelChange, + checkModelChangeProgress, + }; +}; \ No newline at end of file diff --git a/frontend/src/hooks/useOllamaInitialization.ts b/frontend/src/hooks/useOllamaInitialization.ts deleted file mode 100644 index 3d11087..0000000 --- a/frontend/src/hooks/useOllamaInitialization.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { useState, useEffect, useCallback } from 'react'; -import { message } from 'antd'; -import { useTranslation } from 'react-i18next'; -import { HasInitOllama, InitOllama, GetInitOllamaProgress } from '../../wailsjs/go/main/App'; - -export const useOllamaInitialization = () => { - const { t } = useTranslation(); - const [showInitModel, setShowInitModal] = useState(false); - const [initProgress, setInitProgress] = useState(0); - const [isInitializing, setIsInitializing] = useState(false); - const [isCheckingStatus, setIsCheckingStatus] = useState(true); - - const checkInitialization = useCallback(async () => { - try { - const result = await HasInitOllama(); - setIsInitializing(result.IsInit); - } catch (error) { - console.error('Error checking Ollama initialization:', error); - message.error(t('chatbot.checkInitError')); - } - }, [t]); - - const handleInitialize = useCallback(async () => { - setIsInitializing(true); - setInitProgress(0); - try { - InitOllama(); - } catch (error) { - console.error('Error initializing Ollama:', error); - message.error(t('chatbot.initError')); - setIsInitializing(false); - } - }, [t]); - - const checkProgress = useCallback(async () => { - try { - const result = await GetInitOllamaProgress(); - if (result.Exists) { - const progressPercentage = Math.min(Math.round((result.Completed / result.Total) * 100), 100); - setInitProgress(progressPercentage); - if (progressPercentage >= 100) { - setShowInitModal(false); - setIsInitializing(false); - } - } - } catch (error) { - console.error('Error checking initialization progress:', error); - message.error(t('chatbot.progressCheckError')); - setIsInitializing(false); - } - }, [t]); - - useEffect(() => { - const checkStatus = async () => { - setIsCheckingStatus(true); - await checkInitialization(); - setIsCheckingStatus(false); - }; - - checkStatus(); - }, [checkInitialization]); - - useEffect(() => { - if (!isCheckingStatus) { - setShowInitModal(true); - } - }, [isCheckingStatus]); - - useEffect(() => { - let intervalId: number | undefined; - - if (isInitializing) { - intervalId = window.setInterval(checkProgress, 1000); - } - - return () => { - if (intervalId !== undefined) { - window.clearInterval(intervalId); - } - }; - }, [isInitializing, checkProgress]); - - return { - showInitModel, - initProgress, - isInitializing, - isCheckingStatus, - handleInitialize, - setShowInitModal, - }; -}; \ No newline at end of file