From d4313b5e5f55597e6886b70b8c8f16231714ada1 Mon Sep 17 00:00:00 2001 From: lc6464 <64722907+lc6464@users.noreply.github.com> Date: Tue, 14 Apr 2026 22:22:30 +0800 Subject: [PATCH] feat(web): show disabled chat reasons in composer --- .../src/components/chat/chat-composer.tsx | 45 +++++++---- .../src/components/chat/chat-page.tsx | 78 +++++++++++++++++-- web/frontend/src/i18n/locales/en.json | 12 +++ web/frontend/src/i18n/locales/zh.json | 12 +++ 4 files changed, 124 insertions(+), 23 deletions(-) diff --git a/web/frontend/src/components/chat/chat-composer.tsx b/web/frontend/src/components/chat/chat-composer.tsx index b0b25d1db..9223449a4 100644 --- a/web/frontend/src/components/chat/chat-composer.tsx +++ b/web/frontend/src/components/chat/chat-composer.tsx @@ -7,6 +7,18 @@ import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import type { ChatAttachment } from "@/store/chat" +export type ChatInputDisabledReason = + | "gatewayUnknown" + | "gatewayStarting" + | "gatewayRestarting" + | "gatewayStopping" + | "gatewayStopped" + | "gatewayError" + | "websocketConnecting" + | "websocketDisconnected" + | "websocketError" + | "noDefaultModel" + interface ChatComposerProps { input: string attachments: ChatAttachment[] @@ -14,8 +26,7 @@ interface ChatComposerProps { onAddImages: () => void onRemoveAttachment: (index: number) => void onSend: () => void - isConnected: boolean - hasDefaultModel: boolean + inputDisabledReason: ChatInputDisabledReason | null canSend: boolean } @@ -26,12 +37,14 @@ export function ChatComposer({ onAddImages, onRemoveAttachment, onSend, - isConnected, - hasDefaultModel, + inputDisabledReason, canSend, }: ChatComposerProps) { const { t } = useTranslation() - const canInput = isConnected && hasDefaultModel + const canInput = inputDisabledReason === null + const placeholder = canInput + ? t("chat.placeholder") + : t(`chat.disabledPlaceholder.${inputDisabledReason}`) const handleKeyDown = (e: KeyboardEvent) => { if (e.nativeEvent.isComposing) return @@ -74,7 +87,7 @@ export function ChatComposer({ value={input} onChange={(e) => onInputChange(e.target.value)} onKeyDown={handleKeyDown} - placeholder={t("chat.placeholder")} + placeholder={placeholder} disabled={!canInput} className={cn( "placeholder:text-muted-foreground/50 max-h-[200px] min-h-[60px] resize-none border-0 bg-transparent px-2 py-1 text-[15px] shadow-none transition-colors focus-visible:ring-0 focus-visible:outline-none dark:bg-transparent", @@ -100,15 +113,17 @@ export function ChatComposer({ - + {canInput ? ( + + ) : null} diff --git a/web/frontend/src/components/chat/chat-page.tsx b/web/frontend/src/components/chat/chat-page.tsx index e8e07a801..30be8d581 100644 --- a/web/frontend/src/components/chat/chat-page.tsx +++ b/web/frontend/src/components/chat/chat-page.tsx @@ -4,7 +4,10 @@ import { useTranslation } from "react-i18next" import { toast } from "sonner" import { AssistantMessage } from "@/components/chat/assistant-message" -import { ChatComposer } from "@/components/chat/chat-composer" +import { + type ChatInputDisabledReason, + ChatComposer, +} from "@/components/chat/chat-composer" import { ChatEmptyState } from "@/components/chat/chat-empty-state" import { ModelSelector } from "@/components/chat/model-selector" import { SessionHistoryMenu } from "@/components/chat/session-history-menu" @@ -16,7 +19,9 @@ import { useChatModels } from "@/hooks/use-chat-models" import { useGateway } from "@/hooks/use-gateway" import { usePicoChat } from "@/hooks/use-pico-chat" import { useSessionHistory } from "@/hooks/use-session-history" +import type { ConnectionState } from "@/store/chat" import type { ChatAttachment } from "@/store/chat" +import type { GatewayState } from "@/store/gateway" const MAX_IMAGE_SIZE_BYTES = 7 * 1024 * 1024 const MAX_IMAGE_SIZE_LABEL = "7 MB" @@ -44,6 +49,58 @@ function readFileAsDataUrl(file: File): Promise { }) } +function resolveChatInputDisabledReason({ + hasDefaultModel, + connectionState, + gatewayState, +}: { + hasDefaultModel: boolean + connectionState: ConnectionState + gatewayState: GatewayState +}): ChatInputDisabledReason | null { + if (gatewayState === "unknown") { + return "gatewayUnknown" + } + + if (gatewayState === "starting") { + return "gatewayStarting" + } + + if (gatewayState === "restarting") { + return "gatewayRestarting" + } + + if (gatewayState === "stopping") { + return "gatewayStopping" + } + + if (gatewayState === "stopped") { + return "gatewayStopped" + } + + if (gatewayState === "error") { + return "gatewayError" + } + + if (connectionState === "connecting") { + return "websocketConnecting" + } + + if (connectionState === "error") { + return "websocketError" + } + + if (connectionState === "disconnected") { + return "websocketDisconnected" + } + + if (!hasDefaultModel) { + return "noDefaultModel" + } + + return null +} + export function ChatPage() { const { t } = useTranslation() const scrollRef = useRef(null) @@ -65,7 +122,6 @@ export function ChatPage() { const { state: gwState } = useGateway() const isGatewayRunning = gwState === "running" - const isChatConnected = connectionState === "connected" const { defaultModelName, @@ -75,7 +131,13 @@ export function ChatPage() { localModels, handleSetDefault, } = useChatModels({ isConnected: isGatewayRunning }) - const canSend = isChatConnected && Boolean(defaultModelName) + const hasDefaultModel = Boolean(defaultModelName) + const inputDisabledReason = resolveChatInputDisabledReason({ + hasDefaultModel, + connectionState, + gatewayState: gwState, + }) + const canInput = inputDisabledReason === null const { sessions, @@ -110,7 +172,7 @@ export function ChatPage() { }, [messages, isTyping, isAtBottom]) const handleSend = () => { - if ((!input.trim() && attachments.length === 0) || !canSend) return + if ((!input.trim() && attachments.length === 0) || !canInput) return if ( sendMessage({ content: input, @@ -123,7 +185,7 @@ export function ChatPage() { } const handleAddImages = () => { - if (!canSend) return + if (!canInput) return fileInputRef.current?.click() } @@ -180,7 +242,8 @@ export function ChatPage() { } } - const canSubmit = canSend && (Boolean(input.trim()) || attachments.length > 0) + const canSubmit = + canInput && (Boolean(input.trim()) || attachments.length > 0) return (
@@ -278,8 +341,7 @@ export function ChatPage() { onAddImages={handleAddImages} onRemoveAttachment={handleRemoveAttachment} onSend={handleSend} - isConnected={isChatConnected} - hasDefaultModel={Boolean(defaultModelName)} + inputDisabledReason={inputDisabledReason} canSend={canSubmit} />
diff --git a/web/frontend/src/i18n/locales/en.json b/web/frontend/src/i18n/locales/en.json index 2434d4576..179c2d35a 100644 --- a/web/frontend/src/i18n/locales/en.json +++ b/web/frontend/src/i18n/locales/en.json @@ -39,6 +39,18 @@ "welcome": "How can I help you today?", "welcomeDesc": "Ask me about weather, settings, or any other tasks. I'm here to assist you.", "placeholder": "Start a new message...\nPress Enter to send, Shift + Enter for a new line", + "disabledPlaceholder": { + "gatewayUnknown": "Unable to chat: Gateway status is still being checked. Please wait, then refresh the page or restart Launcher if needed.", + "gatewayStarting": "Unable to chat: Gateway is starting. Wait for startup to complete, then try again.", + "gatewayRestarting": "Unable to chat: Gateway is restarting. Please wait for restart to finish.", + "gatewayStopping": "Unable to chat: Gateway is stopping. Wait for it to stop, then start Gateway again.", + "gatewayStopped": "Unable to chat: Gateway is not started. Click Start Gateway in the top bar, then retry.", + "gatewayError": "Unable to chat: Gateway is in an error state. Check logs, then restart Gateway or Launcher.", + "websocketConnecting": "Connecting to chat service... Please wait.", + "websocketDisconnected": "Unable to chat: WebSocket connection is disconnected. Check network and gateway status, then refresh the page or restart Launcher.", + "websocketError": "Unable to chat: WebSocket connection failed. Check network and gateway status, then retry.", + "noDefaultModel": "Unable to chat: No default model is selected. Set a default model on the Models page." + }, "newChat": "New Chat", "notConnected": "Gateway is not running. Start it to chat.", "thinking": { diff --git a/web/frontend/src/i18n/locales/zh.json b/web/frontend/src/i18n/locales/zh.json index c03d4181d..8aa29d9dc 100644 --- a/web/frontend/src/i18n/locales/zh.json +++ b/web/frontend/src/i18n/locales/zh.json @@ -39,6 +39,18 @@ "welcome": "今天我能为您做些什么？", "welcomeDesc": "您可以询问我天气、设置或其他任何任务，我随时为您效劳。", "placeholder": "输入新消息...\n按 Enter 发送，Shift + Enter 换行", + "disabledPlaceholder": { + "gatewayUnknown": "无法对话：网关状态仍在检测中。请稍候重试，如仍无效请刷新页面或重启 Launcher。", + "gatewayStarting": "无法对话：网关正在启动。请等待启动完成后重试。", + "gatewayRestarting": "无法对话：网关正在重启。请等待重启完成。", + "gatewayStopping": "无法对话：网关正在停止。请等待停止完成后重新启动服务。", + "gatewayStopped": "无法对话：网关服务未启动。请点击顶部栏的“启动服务”后重试。", + "gatewayError": "无法对话：网关处于错误状态。请检查日志后重启网关或 Launcher。", + "websocketConnecting": "正在连接聊天服务，请稍候。", + "websocketDisconnected": "无法对话：WebSocket 连接已断开。请检查网络与服务状态，然后刷新页面或重启 Launcher。", + "websocketError": "无法对话：WebSocket 连接失败。请检查网络与服务状态后重试。", + "noDefaultModel": "无法对话：尚未设置默认模型。请前往模型页面设置默认模型。" + }, "newChat": "新建对话", "notConnected": "服务未运行，请先启动以进行对话。", "thinking": {