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

components/chat-input.tsx

@@ -1,22 +1,15 @@
 "use client"
 
-import {
+import { Image as ImageIcon, Loader2, Send, Trash2 } from "lucide-react"
-    Download,
-    History,
-    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,41 +401,7 @@ export function ChatInput({
                     </div>
 
                     <div className="flex items-center gap-1 overflow-hidden justify-end">
-                        <ButtonWithTooltip
+                        <div className="flex items-center gap-1 overflow-x-hidden">
-                            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"
@@ -477,7 +423,7 @@ export function ChatInput({
                                 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()}

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

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,6 +221,7 @@ function SettingsContent({
     }
 
     return (
+        <>
             <DialogContent className="sm:max-w-lg p-0 gap-0">
                 {/* Header */}
                 <DialogHeader className="px-6 pt-6 pb-4">
@@ -249,7 +265,9 @@ function SettingsContent({
                                     />
                                     <Button
                                         onClick={handleSave}
-                                    disabled={isVerifying || !accessCode.trim()}
+                                        disabled={
+                                            isVerifying || !accessCode.trim()
+                                        }
                                         className="h-9 px-4 rounded-xl"
                                     >
                                         {isVerifying ? "..." : dict.common.save}
@@ -333,7 +351,9 @@ function SettingsContent({
                         {/* Close Protection */}
                         <SettingItem
                             label={dict.settings.closeProtection}
-                        description={dict.settings.closeProtectionDescription}
+                            description={
+                                dict.settings.closeProtectionDescription
+                            }
                         >
                             <Switch
                                 id="close-protection"
@@ -348,6 +368,38 @@ function SettingsContent({
                                 }}
                             />
                         </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>
+                        </SettingItem>
                     </div>
                 </div>
 
@@ -358,6 +410,22 @@ function SettingsContent({
                     </p>
                 </div>
             </DialogContent>
+            ;(
+            <HistoryDialog
+                showHistory={showHistory}
+                onToggleHistory={setShowHistory}
+            />
+            )
+            <SaveDialog
+                open={showSaveDialog}
+                onOpenChange={setShowSaveDialog}
+                onSave={handleDiagramSave}
+                defaultFilename={`diagram-${new Date()
+                    .toISOString()
+                    .slice(0, 10)}
+`}
+            />
+        </>
     )
 }
 

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",

lib/i18n/dictionaries/ja.json

@@ -98,7 +98,11 @@
         "minimal": "ミニマル",
         "sketch": "スケッチ",
         "closeProtection": "ページ離脱確認",
-        "closeProtectionDescription": "ページを離れる際に確認を表示します。"
+        "closeProtectionDescription": "ページを離れる際に確認を表示します。",
+        "diagramActions": "ダイアグラム操作",
+        "diagramActionsDescription": "ダイアグラムの履歴とエクスポートを管理",
+        "history": "履歴",
+        "download": "ダウンロード"
     },
     "save": {
         "title": "ダイアグラムを保存",

lib/i18n/dictionaries/zh.json

@@ -98,7 +98,11 @@
         "minimal": "简约",
         "sketch": "草图",
         "closeProtection": "关闭确认",
-        "closeProtectionDescription": "离开页面时显示确认。"
+        "closeProtectionDescription": "离开页面时显示确认。",
+        "diagramActions": "图表操作",
+        "diagramActionsDescription": "管理图表历史记录和导出",
+        "history": "历史记录",
+        "download": "下载"
     },
     "save": {
         "title": "保存图表",

package-lock.json

@@ -60,7 +60,7 @@
                 "react-drawio": "^1.0.3",
                 "react-icons": "^5.5.0",
                 "react-markdown": "^10.1.0",
-                "react-resizable-panels": "^4.0.0",
+                "react-resizable-panels": "^3.0.6",
                 "remark-gfm": "^4.0.1",
                 "server-only": "^0.0.1",
                 "sonner": "^2.0.7",
@@ -13845,6 +13845,16 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/encoding": {
+            "version": "0.1.13",
+            "resolved": "https://registry.npmmirror.com/encoding/-/encoding-0.1.13.tgz",
+            "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "iconv-lite": "^0.6.2"
+            }
+        },
         "node_modules/end-of-stream": {
             "version": "1.4.5",
             "resolved": "https://registry.npmmirror.com/end-of-stream/-/end-of-stream-1.4.5.tgz",
@@ -20712,13 +20722,13 @@
             }
         },
         "node_modules/react-resizable-panels": {
-            "version": "4.0.15",
+            "version": "3.0.6",
-            "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-4.0.15.tgz",
+            "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.6.tgz",
-            "integrity": "sha512-+ygM/EI2h4Qc/cl2fasQ2qwOgNfpQwXLNTU5PqhhPerliX+wnbf7ejcqran7lz3BqABzjddf0pJ3j3G/+A0v9Q==",
+            "integrity": "sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==",
             "license": "MIT",
             "peerDependencies": {
-                "react": "^18.0.0 || ^19.0.0",
+                "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
-                "react-dom": "^18.0.0 || ^19.0.0"
+                "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
             }
         },
         "node_modules/react-style-singleton": {

package.json

@@ -79,7 +79,7 @@
         "react-drawio": "^1.0.3",
         "react-icons": "^5.5.0",
         "react-markdown": "^10.1.0",
-        "react-resizable-panels": "^4.0.0",
+        "react-resizable-panels": "^3.0.6",
         "remark-gfm": "^4.0.1",
         "server-only": "^0.0.1",
         "sonner": "^2.0.7",