feat: Add code download functionality

Adds a new "Download Code" button to the code block component, allowing users to download the code displayed for offline use.

This feature enhances user convenience and provides a more versatile experience for exploring and utilizing code snippets.

src/assets/locale/da/common.json

@@ -101,5 +101,6 @@
         "translate": "Oversæt",
         "custom": "Brugerdefineret"
     },
-    "citations": "Citater"
+    "citations": "Citater",
+    "downloadCode": "Download Kode"
 }

src/assets/locale/de/common.json

@@ -101,5 +101,6 @@
         "translate": "Übersetzen",
         "custom": "Benutzerdefiniert"
     },
-    "citations": "Zitate"
+    "citations": "Zitate",
+    "downloadCode": "Code herunterladen"
 }

src/assets/locale/en/common.json

@@ -105,5 +105,6 @@
     "segmented": {
         "ollama": "Ollama Models",
         "custom": "Custom Models"
-    }
+    },
+    "downloadCode": "Download Code"
 }

src/assets/locale/es/common.json

@@ -100,5 +100,6 @@
         "rephrase": "Reformular",
         "translate": "Traducir"
     },
-    "citations": "Citas"
+    "citations": "Citas",
+    "downloadCode": "Descargar Código"
 }

src/assets/locale/fa/common.json

@@ -94,5 +94,6 @@
         },
         "advanced": "تنظیمات بیشتر مدل"
     },
-    "citations": "منابع"
+    "citations": "منابع",
+    "downloadCode": "دانلود کد"
 }

src/assets/locale/fr/common.json

@@ -100,5 +100,6 @@
         "rephrase": "Reformuler",
         "translate": "Traduire"
     },
-    "citations": "Citations"
+    "citations": "Citations",
+    "downloadCode": "Télécharger le code"
 }

src/assets/locale/it/common.json

@@ -100,5 +100,6 @@
         "rephrase": "Riformulare",
         "translate": "Tradurre"
     },
-    "citations": "Citazioni"
+    "citations": "Citazioni",
+    "downloadCode": "Scarica Codice"
 }

src/assets/locale/ja-JP/common.json

@@ -100,5 +100,6 @@
     "rephrase": "言い換え",
     "translate": "翻訳"
   },
-  "citations": "引用"
+  "citations": "引用",
+  "downloadCode": "コードをダウンロード"
 }

src/assets/locale/ml/common.json

@@ -99,5 +99,6 @@
         "rephrase": "പുനഃരൂപീകരിക്കുക",
         "translate": "വിവർത്തനം ചെയ്യുക"
     },
-    "citations": "ഉദ്ധരണികൾ"
+    "citations": "ഉദ്ധരണികൾ",
+    "downloadCode": "കോഡ് ഡൗൺലോഡ് ചെയ്യുക"
 }

src/assets/locale/no/common.json

@@ -101,5 +101,6 @@
         "translate": "Oversett",
         "custom": "Egendefinert"
     },
-    "citations": "Sitater"
+    "citations": "Sitater",
+    "downloadCode": "Last ned kode"
 }

src/assets/locale/pt-BR/common.json

@@ -100,5 +100,6 @@
     "rephrase": "Reformular",
     "translate": "Traduzir"
   },
-  "citations": "Citações"
+  "citations": "Citações",
+  "downloadCode": "Baixar Código"
 }

src/assets/locale/ru/common.json

@@ -100,5 +100,6 @@
         "rephrase": "Перефразировать",
         "translate": "Перевести"
     },
-    "citations": "Цитаты"
+    "citations": "Цитаты",
+    "downloadCode": "Скачать код"
 }

src/assets/locale/zh/common.json

@@ -100,5 +100,6 @@
         "rephrase": "重述",
         "translate": "翻译"
     },
-    "citations": "引用"
+    "citations": "引用",
+    "downloadCode": "下载代码"
 }

src/components/Common/CodeBlock.tsx

@@ -1,5 +1,6 @@
+import { programmingLanguages } from "@/utils/langauge-extension"
 import { Tooltip, Modal } from "antd"
-import { CheckIcon, ClipboardIcon, EyeIcon, Maximize2Icon } from "lucide-react"
+import { CheckIcon, ClipboardIcon, DownloadIcon } from "lucide-react"
 import { FC, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
@@ -23,30 +24,36 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
     }, 4000)
   }
 
-  const handlePreview = () => {
-    setPreviewVisible(true)
-  }
-
   const handlePreviewClose = () => {
     setPreviewVisible(false)
   }
 
+  const handleDownload = () => {
+    const blob = new Blob([value], { type: "text/plain" })
+    const url = window.URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = `code_${new Date().toISOString().replace(/[:.]/g, "-")}.${programmingLanguages[language] || language}`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    window.URL.revokeObjectURL(url)
+  }
+
   return (
     <>
       <div className="code relative text-base font-sans codeblock bg-zinc-950 rounded-md overflow-hidden">
         <div className="flex bg-gray-800 items-center justify-between py-1.5 px-4">
           <span className="text-xs lowercase text-gray-200">{language}</span>
 
-          <div className="flex items-center">
+          <div className="flex items-center gap-2">
-            {language.toLowerCase() === "html" && (
+            <Tooltip title={t("downloadCode")}>
-              <Tooltip title={t("preview")}>
               <button
-                  onClick={handlePreview}
+                onClick={handleDownload}
                 className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-200 hover:bg-gray-700 hover:text-gray-100 focus:outline-none">
-                  <EyeIcon className="h-4 w-4" />
+                <DownloadIcon className="h-4 w-4" />
               </button>
             </Tooltip>
-            )}
             <Tooltip title={t("copyToClipboard")}>
               <button
                 onClick={handleCopy}

src/components/Layouts/Layout.tsx

@@ -54,7 +54,7 @@ export default function OptionLayout({
                   if (confirm) {
                     const db = new PageAssitDatabase()
                     await db.deleteAllChatHistory()
-                    queryClient.invalidateQueries({
+                    await queryClient.invalidateQueries({
                       queryKey: ["fetchChatHistory"]
                     })
                     clearChat()

src/components/Option/Playground/PlaygroundChat.tsx

@@ -61,10 +61,10 @@ export const PlaygroundChat = () => {
         )}
       </div>
       {!isAtBottom && (
-        <div className="fixed md:bottom-40 bottom-36 z-20 left-0 right-0 flex justify-center">
+        <div className="fixed bottom-36 z-20 left-0 right-0 flex justify-center">
           <button
             onClick={scrollToBottom}
-            className="bg-gray-100 border dark:border-gray-700 dark:bg-gray-800 p-1 rounded-full shadow-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
+            className="bg-white border border-gray-100 dark:border-none dark:bg-white/20 p-1.5 rounded-full pointer-events-auto">
             <ChevronDown className="size-4 text-gray-600 dark:text-gray-300" />
           </button>
         </div>

src/hooks/useMessageOption.tsx

@@ -8,7 +8,7 @@ import {
   systemPromptForNonRagOption
 } from "~/services/ollama"
 import { type ChatHistory, type Message } from "~/store/option"
-import { HumanMessage, SystemMessage } from "@langchain/core/messages"
+import { SystemMessage } from "@langchain/core/messages"
 import { useStoreMessageOption } from "~/store/option"
 import {
   deleteChatForEdit,

src/utils/langauge-extension.ts

@@ -0,0 +1,29 @@
+export const programmingLanguages = {
+    html: "html",
+    javascript: "js",
+    typescript: "ts",
+    python: "py",
+    java: "java",
+    cpp: "cpp",
+    c: "c",
+    csharp: "cs",
+    ruby: "rb",
+    php: "php",
+    swift: "swift",
+    go: "go",
+    rust: "rs",
+    kotlin: "kt",
+    sql: "sql",
+    shell: "sh",
+    markdown: "md",
+    json: "json",
+    yaml: "yml",
+    xml: "xml",
+    css: "css",
+    scss: "scss",
+    jsx: "jsx",
+    tsx: "tsx",
+    vue: "vue",
+    dart: "dart",
+    lua: "lua"
+}