fix: move History and Download buttons to Settings dialog for cleaner chat interface

2026-01-02 14:22:28 +08:00 · 2025-12-27 20:27:48 +05:30
parent 9ac99a4690
commit c9d9dd257c
6 changed files with 259 additions and 237 deletions
--- a/components/chat-input.tsx
+++ b/components/chat-input.tsx
@@ -1,22 +1,15 @@
 "use client"

-import {
-    Download,
-    History,
-    Image as ImageIcon,
-    Loader2,
-    Send,
-    Trash2,
-} from "lucide-react"
+import { Image as ImageIcon, Loader2, Send, Trash2 } from "lucide-react"
 import type React from "react"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { toast } from "sonner"
 import { ButtonWithTooltip } from "@/components/button-with-tooltip"
 import { ErrorToast } from "@/components/error-toast"
-import { HistoryDialog } from "@/components/history-dialog"
+
 import { ModelSelector } from "@/components/model-selector"
 import { ResetWarningModal } from "@/components/reset-warning-modal"
-import { SaveDialog } from "@/components/save-dialog"
+
 import { Button } from "@/components/ui/button"
 import { Switch } from "@/components/ui/switch"
 import { Textarea } from "@/components/ui/textarea"
@@ -25,7 +18,7 @@ import {
    TooltipContent,
    TooltipTrigger,
 } from "@/components/ui/tooltip"
-import { useDiagram } from "@/contexts/diagram-context"
+
 import { useDictionary } from "@/hooks/use-dictionary"
 import { formatMessage } from "@/lib/i18n/utils"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
@@ -152,8 +145,7 @@ interface ChatInputProps {
        File,
        { text: string; charCount: number; isExtracting: boolean }
    >
-    showHistory?: boolean
-    onToggleHistory?: (show: boolean) => void
+
    sessionId?: string
    error?: Error | null
    minimalStyle?: boolean
@@ -175,9 +167,7 @@ export function ChatInput({
    files = [],
    onFileChange = () => {},
    pdfData = new Map(),
-    showHistory = false,
-    onToggleHistory = () => {},
-    sessionId,
+
    error = null,
    minimalStyle = false,
    onMinimalStyleChange = () => {},
@@ -188,12 +178,7 @@ export function ChatInput({
    onConfigureModels = () => {},
 }: ChatInputProps) {
    const dict = useDictionary()
-    const {
-        diagramHistory,
-        saveDiagramToFile,
-        showSaveDialog,
-        setShowSaveDialog,
-    } = useDiagram()
+
    const textareaRef = useRef<HTMLTextAreaElement>(null)
    const fileInputRef = useRef<HTMLInputElement>(null)
    const [isDragging, setIsDragging] = useState(false)
@@ -386,11 +371,6 @@ export function ChatInput({
                            onClear={handleClear}
                        />

-                        <HistoryDialog
-                            showHistory={showHistory}
-                            onToggleHistory={onToggleHistory}
-                        />
-
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <div className="flex items-center gap-1.5">
@@ -421,63 +401,29 @@ export function ChatInput({
                    </div>

                    <div className="flex items-center gap-1 overflow-hidden justify-end">
-                        <ButtonWithTooltip
-                            type="button"
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => onToggleHistory(true)}
-                            disabled={isDisabled || diagramHistory.length === 0}
-                            tooltipContent={dict.chat.diagramHistory}
-                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                        >
-                            <History className="h-4 w-4" />
-                        </ButtonWithTooltip>
-
-                        <ButtonWithTooltip
-                            type="button"
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => setShowSaveDialog(true)}
-                            disabled={isDisabled}
-                            tooltipContent={dict.chat.saveDiagram}
-                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                        >
-                            <Download className="h-4 w-4" />
-                        </ButtonWithTooltip>
-
-                        <SaveDialog
-                            open={showSaveDialog}
-                            onOpenChange={setShowSaveDialog}
-                            onSave={(filename, format) =>
-                                saveDiagramToFile(filename, format, sessionId)
-                            }
-                            defaultFilename={`diagram-${new Date()
-                                .toISOString()
-                                .slice(0, 10)}`}
-                        />
-
-                        <ButtonWithTooltip
-                            type="button"
-                            variant="ghost"
-                            size="sm"
-                            onClick={triggerFileInput}
-                            disabled={isDisabled}
-                            tooltipContent={dict.chat.uploadFile}
-                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                        >
-                            <ImageIcon className="h-4 w-4" />
-                        </ButtonWithTooltip>
-
-                        <input
-                            type="file"
-                            ref={fileInputRef}
-                            className="hidden"
-                            onChange={handleFileChange}
-                            accept="image/*,.pdf,application/pdf,text/*,.md,.markdown,.json,.csv,.xml,.yaml,.yml,.toml"
-                            multiple
-                            disabled={isDisabled}
-                        />
+                        <div className="flex items-center gap-1 overflow-x-hidden">
+                            <ButtonWithTooltip
+                                type="button"
+                                variant="ghost"
+                                size="sm"
+                                onClick={triggerFileInput}
+                                disabled={isDisabled}
+                                tooltipContent={dict.chat.uploadFile}
+                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                            >
+                                <ImageIcon className="h-4 w-4" />
+                            </ButtonWithTooltip>

+                            <input
+                                type="file"
+                                ref={fileInputRef}
+                                className="hidden"
+                                onChange={handleFileChange}
+                                accept="image/*,.pdf,application/pdf,text/*,.md,.markdown,.json,.csv,.xml,.yaml,.yml,.toml"
+                                multiple
+                                disabled={isDisabled}
+                            />
+                        </div>
                        <ModelSelector
                            models={models}
                            selectedModelId={selectedModelId}
@@ -486,9 +432,7 @@ export function ChatInput({
                            disabled={isDisabled}
                            showUnvalidatedModels={showUnvalidatedModels}
                        />
-
                        <div className="w-px h-5 bg-border mx-1" />
-
                        <Button
                            type="submit"
                            disabled={isDisabled || !input.trim()}
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -154,7 +154,6 @@ export default function ChatPanel({
    // File processing using extracted hook
    const { files, pdfData, handleFileChange, setFiles } = useFileProcessor()

-    const [showHistory, setShowHistory] = useState(false)
    const [showSettingsDialog, setShowSettingsDialog] = useState(false)
    const [showModelConfigDialog, setShowModelConfigDialog] = useState(false)

@@ -1066,8 +1065,6 @@ export default function ChatPanel({
                    files={files}
                    onFileChange={handleFileChange}
                    pdfData={pdfData}
-                    showHistory={showHistory}
-                    onToggleHistory={setShowHistory}
                    sessionId={sessionId}
                    error={error}
                    minimalStyle={minimalStyle}
@@ -1088,6 +1085,7 @@ export default function ChatPanel({
                onToggleDrawioUi={onToggleDrawioUi}
                darkMode={darkMode}
                onToggleDarkMode={onToggleDarkMode}
+                sessionId={sessionId}
            />

            <ModelConfigDialog
--- a/components/settings-dialog.tsx
+++ b/components/settings-dialog.tsx
@@ -1,8 +1,10 @@
 "use client"

-import { Moon, Sun } from "lucide-react"
+import { Download, History, Moon, Sun } from "lucide-react"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { Suspense, useEffect, useState } from "react"
+import { HistoryDialog } from "@/components/history-dialog"
+import { type ExportFormat, SaveDialog } from "@/components/save-dialog"
 import { Button } from "@/components/ui/button"
 import {
    Dialog,
@@ -21,6 +23,7 @@ import {
    SelectValue,
 } from "@/components/ui/select"
 import { Switch } from "@/components/ui/switch"
+import { useDiagram } from "@/contexts/diagram-context"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { getApiEndpoint } from "@/lib/base-path"
 import { i18n, type Locale } from "@/lib/i18n/config"
@@ -65,6 +68,7 @@ interface SettingsDialogProps {
    onToggleDrawioUi: () => void
    darkMode: boolean
    onToggleDarkMode: () => void
+    sessionId?: string
 }

 export const STORAGE_ACCESS_CODE_KEY = "next-ai-draw-io-access-code"
@@ -86,6 +90,7 @@ function SettingsContent({
    onToggleDrawioUi,
    darkMode,
    onToggleDarkMode,
+    sessionId,
 }: SettingsDialogProps) {
    const dict = useDictionary()
    const router = useRouter()
@@ -95,11 +100,21 @@ function SettingsContent({
    const [closeProtection, setCloseProtection] = useState(true)
    const [isVerifying, setIsVerifying] = useState(false)
    const [error, setError] = useState("")
+    const [showHistory, setShowHistory] = useState(false)
+    const [showSaveDialog, setShowSaveDialog] = useState(false)
    const [accessCodeRequired, setAccessCodeRequired] = useState(
        () => getStoredAccessCodeRequired() ?? false,
    )
    const [currentLang, setCurrentLang] = useState("en")

+    // Get diagram context
+    const { diagramHistory, saveDiagramToFile } = useDiagram()
+
+    // Handler for saving diagram (RENAMED to avoid conflict)
+    const handleDiagramSave = (filename: string, format: ExportFormat) => {
+        saveDiagramToFile(filename, format, sessionId)
+    }
+
    useEffect(() => {
        // Only fetch if not cached in localStorage
        if (getStoredAccessCodeRequired() !== null) return
@@ -206,158 +221,211 @@ function SettingsContent({
    }

    return (
-        <DialogContent className="sm:max-w-lg p-0 gap-0">
-            {/* Header */}
-            <DialogHeader className="px-6 pt-6 pb-4">
-                <DialogTitle>{dict.settings.title}</DialogTitle>
-                <DialogDescription className="mt-1">
-                    {dict.settings.description}
-                </DialogDescription>
-            </DialogHeader>
+        <>
+            <DialogContent className="sm:max-w-lg p-0 gap-0">
+                {/* Header */}
+                <DialogHeader className="px-6 pt-6 pb-4">
+                    <DialogTitle>{dict.settings.title}</DialogTitle>
+                    <DialogDescription className="mt-1">
+                        {dict.settings.description}
+                    </DialogDescription>
+                </DialogHeader>

-            {/* Content */}
-            <div className="px-6 pb-6">
-                <div className="divide-y divide-border-subtle">
-                    {/* Access Code (conditional) */}
-                    {accessCodeRequired && (
-                        <div className="py-4 first:pt-0 space-y-3">
-                            <div className="space-y-0.5">
-                                <Label
-                                    htmlFor="access-code"
-                                    className="text-sm font-medium"
-                                >
-                                    {dict.settings.accessCode}
-                                </Label>
-                                <p className="text-xs text-muted-foreground">
-                                    {dict.settings.accessCodeDescription}
-                                </p>
+                {/* Content */}
+                <div className="px-6 pb-6">
+                    <div className="divide-y divide-border-subtle">
+                        {/* Access Code (conditional) */}
+                        {accessCodeRequired && (
+                            <div className="py-4 first:pt-0 space-y-3">
+                                <div className="space-y-0.5">
+                                    <Label
+                                        htmlFor="access-code"
+                                        className="text-sm font-medium"
+                                    >
+                                        {dict.settings.accessCode}
+                                    </Label>
+                                    <p className="text-xs text-muted-foreground">
+                                        {dict.settings.accessCodeDescription}
+                                    </p>
+                                </div>
+                                <div className="flex gap-2">
+                                    <Input
+                                        id="access-code"
+                                        type="password"
+                                        value={accessCode}
+                                        onChange={(e) =>
+                                            setAccessCode(e.target.value)
+                                        }
+                                        onKeyDown={handleKeyDown}
+                                        placeholder={
+                                            dict.settings.accessCodePlaceholder
+                                        }
+                                        autoComplete="off"
+                                        className="h-9"
+                                    />
+                                    <Button
+                                        onClick={handleSave}
+                                        disabled={
+                                            isVerifying || !accessCode.trim()
+                                        }
+                                        className="h-9 px-4 rounded-xl"
+                                    >
+                                        {isVerifying ? "..." : dict.common.save}
+                                    </Button>
+                                </div>
+                                {error && (
+                                    <p className="text-xs text-destructive">
+                                        {error}
+                                    </p>
+                                )}
                            </div>
-                            <div className="flex gap-2">
-                                <Input
-                                    id="access-code"
-                                    type="password"
-                                    value={accessCode}
-                                    onChange={(e) =>
-                                        setAccessCode(e.target.value)
-                                    }
-                                    onKeyDown={handleKeyDown}
-                                    placeholder={
-                                        dict.settings.accessCodePlaceholder
-                                    }
-                                    autoComplete="off"
-                                    className="h-9"
-                                />
-                                <Button
-                                    onClick={handleSave}
-                                    disabled={isVerifying || !accessCode.trim()}
-                                    className="h-9 px-4 rounded-xl"
+                        )}
+
+                        {/* Language */}
+                        <SettingItem
+                            label={dict.settings.language}
+                            description={dict.settings.languageDescription}
+                        >
+                            <Select
+                                value={currentLang}
+                                onValueChange={changeLanguage}
+                            >
+                                <SelectTrigger
+                                    id="language-select"
+                                    className="w-[120px] h-9 rounded-xl"
                                >
-                                    {isVerifying ? "..." : dict.common.save}
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {i18n.locales.map((locale) => (
+                                        <SelectItem key={locale} value={locale}>
+                                            {LANGUAGE_LABELS[locale]}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </SettingItem>
+
+                        {/* Theme */}
+                        <SettingItem
+                            label={dict.settings.theme}
+                            description={dict.settings.themeDescription}
+                        >
+                            <Button
+                                id="theme-toggle"
+                                variant="outline"
+                                size="icon"
+                                onClick={onToggleDarkMode}
+                                className="h-9 w-9 rounded-xl border-border-subtle hover:bg-interactive-hover"
+                            >
+                                {darkMode ? (
+                                    <Sun className="h-4 w-4" />
+                                ) : (
+                                    <Moon className="h-4 w-4" />
+                                )}
+                            </Button>
+                        </SettingItem>
+
+                        {/* Draw.io Style */}
+                        <SettingItem
+                            label={dict.settings.drawioStyle}
+                            description={`${dict.settings.drawioStyleDescription} ${
+                                drawioUi === "min"
+                                    ? dict.settings.minimal
+                                    : dict.settings.sketch
+                            }`}
+                        >
+                            <Button
+                                id="drawio-ui"
+                                variant="outline"
+                                onClick={onToggleDrawioUi}
+                                className="h-9 w-[120px] rounded-xl border-border-subtle hover:bg-interactive-hover font-normal"
+                            >
+                                {dict.settings.switchTo}{" "}
+                                {drawioUi === "min"
+                                    ? dict.settings.sketch
+                                    : dict.settings.minimal}
+                            </Button>
+                        </SettingItem>
+
+                        {/* Close Protection */}
+                        <SettingItem
+                            label={dict.settings.closeProtection}
+                            description={
+                                dict.settings.closeProtectionDescription
+                            }
+                        >
+                            <Switch
+                                id="close-protection"
+                                checked={closeProtection}
+                                onCheckedChange={(checked) => {
+                                    setCloseProtection(checked)
+                                    localStorage.setItem(
+                                        STORAGE_CLOSE_PROTECTION_KEY,
+                                        checked.toString(),
+                                    )
+                                    onCloseProtectionChange?.(checked)
+                                }}
+                            />
+                        </SettingItem>
+
+                        {/* Diagram Actions */}
+                        <SettingItem
+                            label={dict.settings.diagramActions}
+                            description={
+                                dict.settings.diagramActionsDescription
+                            }
+                        >
+                            <div className="flex gap-2">
+                                <Button
+                                    id="history-button"
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => setShowHistory(true)}
+                                    disabled={diagramHistory.length === 0}
+                                    className="h-9 rounded-xl border-border-subtle hover:bg-interactive-hover"
+                                >
+                                    <History className="h-4 w-4 mr-1.5" />
+                                    {dict.settings.history}
+                                </Button>
+                                <Button
+                                    id="download-button"
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => setShowSaveDialog(true)}
+                                    className="h-9 rounded-xl border-border-subtle hover:bg-interactive-hover"
+                                >
+                                    <Download className="h-4 w-4 mr-1.5" />
+                                    {dict.settings.download}
                                </Button>
                            </div>
-                            {error && (
-                                <p className="text-xs text-destructive">
-                                    {error}
-                                </p>
-                            )}
-                        </div>
-                    )}
-
-                    {/* Language */}
-                    <SettingItem
-                        label={dict.settings.language}
-                        description={dict.settings.languageDescription}
-                    >
-                        <Select
-                            value={currentLang}
-                            onValueChange={changeLanguage}
-                        >
-                            <SelectTrigger
-                                id="language-select"
-                                className="w-[120px] h-9 rounded-xl"
-                            >
-                                <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                                {i18n.locales.map((locale) => (
-                                    <SelectItem key={locale} value={locale}>
-                                        {LANGUAGE_LABELS[locale]}
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
-                    </SettingItem>
-
-                    {/* Theme */}
-                    <SettingItem
-                        label={dict.settings.theme}
-                        description={dict.settings.themeDescription}
-                    >
-                        <Button
-                            id="theme-toggle"
-                            variant="outline"
-                            size="icon"
-                            onClick={onToggleDarkMode}
-                            className="h-9 w-9 rounded-xl border-border-subtle hover:bg-interactive-hover"
-                        >
-                            {darkMode ? (
-                                <Sun className="h-4 w-4" />
-                            ) : (
-                                <Moon className="h-4 w-4" />
-                            )}
-                        </Button>
-                    </SettingItem>
-
-                    {/* Draw.io Style */}
-                    <SettingItem
-                        label={dict.settings.drawioStyle}
-                        description={`${dict.settings.drawioStyleDescription} ${
-                            drawioUi === "min"
-                                ? dict.settings.minimal
-                                : dict.settings.sketch
-                        }`}
-                    >
-                        <Button
-                            id="drawio-ui"
-                            variant="outline"
-                            onClick={onToggleDrawioUi}
-                            className="h-9 w-[120px] rounded-xl border-border-subtle hover:bg-interactive-hover font-normal"
-                        >
-                            {dict.settings.switchTo}{" "}
-                            {drawioUi === "min"
-                                ? dict.settings.sketch
-                                : dict.settings.minimal}
-                        </Button>
-                    </SettingItem>
-
-                    {/* Close Protection */}
-                    <SettingItem
-                        label={dict.settings.closeProtection}
-                        description={dict.settings.closeProtectionDescription}
-                    >
-                        <Switch
-                            id="close-protection"
-                            checked={closeProtection}
-                            onCheckedChange={(checked) => {
-                                setCloseProtection(checked)
-                                localStorage.setItem(
-                                    STORAGE_CLOSE_PROTECTION_KEY,
-                                    checked.toString(),
-                                )
-                                onCloseProtectionChange?.(checked)
-                            }}
-                        />
-                    </SettingItem>
+                        </SettingItem>
+                    </div>
                </div>
-            </div>

-            {/* Footer */}
-            <div className="px-6 py-4 border-t border-border-subtle bg-surface-1/50 rounded-b-2xl">
-                <p className="text-xs text-muted-foreground text-center">
-                    Version {process.env.APP_VERSION}
-                </p>
-            </div>
-        </DialogContent>
+                {/* Footer */}
+                <div className="px-6 py-4 border-t border-border-subtle bg-surface-1/50 rounded-b-2xl">
+                    <p className="text-xs text-muted-foreground text-center">
+                        Version {process.env.APP_VERSION}
+                    </p>
+                </div>
+            </DialogContent>
+            ;(
+            <HistoryDialog
+                showHistory={showHistory}
+                onToggleHistory={setShowHistory}
+            />
+            )
+            <SaveDialog
+                open={showSaveDialog}
+                onOpenChange={setShowSaveDialog}
+                onSave={handleDiagramSave}
+                defaultFilename={`diagram-${new Date()
+                    .toISOString()
+                    .slice(0, 10)}
+`}
+            />
+        </>
    )
 }

--- a/lib/i18n/dictionaries/en.json
+++ b/lib/i18n/dictionaries/en.json
@@ -98,7 +98,11 @@
        "minimal": "Minimal",
        "sketch": "Sketch",
        "closeProtection": "Close Protection",
-        "closeProtectionDescription": "Show confirmation when leaving the page."
+        "closeProtectionDescription": "Show confirmation when leaving the page.",
+        "diagramActions": "Diagram Actions",
+        "diagramActionsDescription": "Manage diagram history and exports",
+        "history": "History",
+        "download": "Download"
    },
    "save": {
        "title": "Save Diagram",
--- a/lib/i18n/dictionaries/ja.json
+++ b/lib/i18n/dictionaries/ja.json
@@ -98,7 +98,11 @@
        "minimal": "ミニマル",
        "sketch": "スケッチ",
        "closeProtection": "ページ離脱確認",
-        "closeProtectionDescription": "ページを離れる際に確認を表示します。"
+        "closeProtectionDescription": "ページを離れる際に確認を表示します。",
+        "diagramActions": "ダイアグラム操作",
+        "diagramActionsDescription": "ダイアグラムの履歴とエクスポートを管理",
+        "history": "履歴",
+        "download": "ダウンロード"
    },
    "save": {
        "title": "ダイアグラムを保存",
--- a/lib/i18n/dictionaries/zh.json
+++ b/lib/i18n/dictionaries/zh.json
@@ -98,7 +98,11 @@
        "minimal": "简约",
        "sketch": "草图",
        "closeProtection": "关闭确认",
-        "closeProtectionDescription": "离开页面时显示确认。"
+        "closeProtectionDescription": "离开页面时显示确认。",
+        "diagramActions": "图表操作",
+        "diagramActionsDescription": "管理图表历史记录和导出",
+        "history": "历史记录",
+        "download": "下载"
    },
    "save": {
        "title": "保存图表",