build: bundle size (#49)

.gitignore

@@ -13,9 +13,9 @@ dist-ssr
 *.local
 
 # Editor directories and files
-.vscode/*
+# .vscode/*
-!.vscode/extensions.json
+# !.vscode/extensions.json
-!.vscode/settings.json
+# !.vscode/settings.json
 .idea
 .DS_Store
 *.suo

.vscode/launch.json

@@ -0,0 +1,32 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "lldb",
+      "request": "launch",
+      "name": "Tauri Development Debug",
+      "cargo": {
+        "args": [
+          "build",
+          "--manifest-path=./src-tauri/Cargo.toml",
+          "--no-default-features"
+        ]
+      },
+      // task for the `beforeDevCommand` if used, must be configured in `.vscode/tasks.json`
+      "preLaunchTask": "ui:dev"
+    },
+    {
+      "type": "lldb",
+      "request": "launch",
+      "name": "Tauri Production Debug",
+      "cargo": {
+        "args": ["build", "--release", "--manifest-path=./src-tauri/Cargo.toml"]
+      },
+      // task for the `beforeBuildCommand` if used, must be configured in `.vscode/tasks.json`
+      "preLaunchTask": "ui:build"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,25 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "ui:dev",
+      "type": "shell",
+      // `dev` keeps running in the background
+      // ideally you should also configure a `problemMatcher`
+      // see https://code.visualstudio.com/docs/editor/tasks#_can-a-background-task-be-used-as-a-prelaunchtask-in-launchjson
+      "isBackground": true,
+      // change this to your `beforeDevCommand`:
+      "command": "yarn",
+      "args": ["dev"]
+    },
+    {
+      "label": "ui:build",
+      "type": "shell",
+      // change this to your `beforeBuildCommand`:
+      "command": "yarn",
+      "args": ["build"]
+    }
+  ]
+}

package.json

@@ -19,14 +19,11 @@
     "@tauri-apps/plugin-shell": ">=2.0.0",
     "@tauri-apps/plugin-websocket": "~2",
     "@tauri-apps/plugin-window": "2.0.0-alpha.1",
-    "@traptitech/markdown-it-katex": "^3.6.0",
     "axios": "^1.7.7",
     "clsx": "^2.1.1",
-    "highlight.js": "^11.10.0",
     "i18next": "^23.16.2",
     "lodash": "^4.17.21",
     "lucide-react": "^0.453.0",
-    "markdown-it": "^14.1.0",
     "mermaid": "^11.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

pnpm-lock.yaml

@@ -35,18 +35,12 @@ importers:
       '@tauri-apps/plugin-window':
         specifier: 2.0.0-alpha.1
         version: 2.0.0-alpha.1
-      '@traptitech/markdown-it-katex':
-        specifier: ^3.6.0
-        version: 3.6.0
       axios:
         specifier: ^1.7.7
         version: 1.7.7
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
-      highlight.js:
-        specifier: ^11.10.0
-        version: 11.10.0
       i18next:
         specifier: ^23.16.2
         version: 23.16.2
@@ -56,9 +50,6 @@ importers:
       lucide-react:
         specifier: ^0.453.0
         version: 0.453.0(react@18.3.1)
-      markdown-it:
-        specifier: ^14.1.0
-        version: 14.1.0
       mermaid:
         specifier: ^11.4.0
         version: 11.4.0
@@ -716,9 +707,6 @@ packages:
   '@tauri-apps/plugin-window@2.0.0-alpha.1':
     resolution: {integrity: sha512-dFOAgal/3Txz3SQ+LNQq0AK1EPC+acdaFlwPVB/6KXUZYmaFleIlzgxDVoJCQ+/xOhxvYrdQaFLefh0I/Kldbg==}
 
-  '@traptitech/markdown-it-katex@3.6.0':
-    resolution: {integrity: sha512-CnJzTWxsgLGXFdSrWRaGz7GZ1kUUi8g3E9HzJmeveX1YwVJavrKYqysktfHZQsujdnRqV5O7g8FPKEA/aeTkOQ==}
-
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -935,9 +923,6 @@ packages:
   arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
-  argparse@2.0.1:
-    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
@@ -1404,10 +1389,6 @@ packages:
   hastscript@8.0.0:
     resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
 
-  highlight.js@11.10.0:
-    resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==}
-    engines: {node: '>=12.0.0'}
-
   highlight.js@11.9.0:
     resolution: {integrity: sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==}
     engines: {node: '>=12.0.0'}
@@ -1529,9 +1510,6 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
-  linkify-it@5.0.0:
-    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
-
   local-pkg@0.5.0:
     resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
     engines: {node: '>=14'}
@@ -1563,10 +1541,6 @@ packages:
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
 
-  markdown-it@14.1.0:
-    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
-    hasBin: true
-
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
@@ -1626,9 +1600,6 @@ packages:
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
-  mdurl@2.0.0:
-    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
-
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -1876,10 +1847,6 @@ packages:
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
-  punycode.js@2.3.1:
-    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
-    engines: {node: '>=6'}
-
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -2107,9 +2074,6 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
-  uc.micro@2.1.0:
-    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
-
   ufo@1.5.4:
     resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
@@ -2770,10 +2734,6 @@ snapshots:
     dependencies:
       '@tauri-apps/api': 2.0.0-alpha.6
 
-  '@traptitech/markdown-it-katex@3.6.0':
-    dependencies:
-      katex: 0.16.11
-
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.25.8
@@ -3023,8 +2983,6 @@ snapshots:
 
   arg@5.0.2: {}
 
-  argparse@2.0.1: {}
-
   asynckit@0.4.0: {}
 
   autoprefixer@10.4.20(postcss@8.4.47):
@@ -3563,8 +3521,6 @@ snapshots:
       property-information: 6.5.0
       space-separated-tokens: 2.0.2
 
-  highlight.js@11.10.0: {}
-
   highlight.js@11.9.0: {}
 
   html-parse-stringify@3.0.1:
@@ -3660,10 +3616,6 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
-  linkify-it@5.0.0:
-    dependencies:
-      uc.micro: 2.1.0
-
   local-pkg@0.5.0:
     dependencies:
       mlly: 1.7.2
@@ -3695,15 +3647,6 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  markdown-it@14.1.0:
-    dependencies:
-      argparse: 2.0.1
-      entities: 4.5.0
-      linkify-it: 5.0.0
-      mdurl: 2.0.0
-      punycode.js: 2.3.1
-      uc.micro: 2.1.0
-
   markdown-table@3.0.4: {}
 
   marked@13.0.3: {}
@@ -3878,8 +3821,6 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
 
-  mdurl@2.0.0: {}
-
   merge2@1.4.1: {}
 
   mermaid@11.4.0:
@@ -4247,8 +4188,6 @@ snapshots:
 
   proxy-from-env@1.1.0: {}
 
-  punycode.js@2.3.1: {}
-
   queue-microtask@1.2.3: {}
 
   react-dom@18.3.1(react@18.3.1):
@@ -4552,8 +4491,6 @@ snapshots:
 
   typescript@5.6.3: {}
 
-  uc.micro@2.1.0: {}
-
   ufo@1.5.4: {}
 
   undici-types@6.19.8: {}

src-tauri/tauri.conf.json

@@ -98,7 +98,7 @@
         }
       }
     },
-    "resources": ["icons"]
+    "resources": ["assets", "icons"]
   },
   "plugins": {
     "window": {},

src/components/ChatAI/ChatMessage.tsx

@@ -1,5 +1,7 @@
+import React from "react";
 import type { Message } from "./types";
-import { Markdown } from "./Markdown";
+
+const Markdown = React.lazy(() => import('./Markdown'));
 
 interface ChatMessageProps {
   message: Message;

src/components/ChatAI/Markdown.tsx

@@ -15,7 +15,7 @@ import "./markdown.css";
 import "./highlight.css";
 
 // 8
-export function Mermaid(props: { code: string }) {
+function Mermaid(props: { code: string }) {
   const ref = useRef<HTMLDivElement>(null);
   const [hasError, setHasError] = useState(false);
 
@@ -63,7 +63,7 @@ export function Mermaid(props: { code: string }) {
 }
 
 // 7
-export function PreCode(props: { children?: any }) {
+function PreCode(props: { children?: any }) {
   const ref = useRef<HTMLPreElement>(null);
   // const previewRef = useRef<HTMLPreviewHander>(null);
   const [mermaidCode, setMermaidCode] = useState("");
@@ -278,10 +278,10 @@ function _MarkDownContent(props: { content: string }) {
 }
 
 // 2
-export const MarkdownContent = React.memo(_MarkDownContent);
+const MarkdownContent = React.memo(_MarkDownContent);
 
 // 1
-export function Markdown(
+export default function Markdown(
   props: {
     content: string;
     loading?: boolean;

src/components/SearchChat/Search.tsx

@@ -20,12 +20,14 @@ function Search({ isTransitioned, isChatMode, input }: SearchProps) {
 
   const mainWindowRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
-    if(!isTauri()) return;
+    if (!isTauri()) return;
     const element = mainWindowRef.current;
     if (!element) return;
 
     const resizeObserver = new ResizeObserver(async (entries) => {
-      const { getCurrentWebviewWindow } = await import("@tauri-apps/api/webviewWindow");
+      const { getCurrentWebviewWindow } = await import(
+        "@tauri-apps/api/webviewWindow"
+      );
       const { LogicalSize } = await import("@tauri-apps/api/dpi");
 
       for (let entry of entries) {
@@ -82,7 +84,7 @@ function Search({ isTransitioned, isChatMode, input }: SearchProps) {
     if (!input) setSuggests([]);
   }, [input]);
 
-  // if (isChatMode || suggests.length === 0) return null;
+  if (isChatMode || suggests.length === 0) return null;
 
   return (
     <div
@@ -94,7 +96,7 @@ function Search({ isTransitioned, isChatMode, input }: SearchProps) {
         backgroundSize: "101% 100%",
       }}
     >
-      {isChatMode ? null : (
+      {!isChatMode ? (
         <div
           ref={mainWindowRef}
           className={`max-h-[498px] pb-10 w-full relative`}
@@ -114,7 +116,7 @@ function Search({ isTransitioned, isChatMode, input }: SearchProps) {
             <Footer isChat={false} name={selectedItem?.source} />
           ) : null}
         </div>
-      )}
+      ) : null}
     </div>
   );
 }

src/components/SearchChat/WebSearch.tsx

@@ -110,80 +110,14 @@ export default function WebSearch() {
 
   return (
     <div className="fixed inset-0 z-50 overflow-y-auto">
-      <div className="min-h-screen px-4 text-center">
+      <div className="min-h-screen px-4 pt-20 text-center">
         <div
           className="fixed inset-0 bg-black/50 transition-opacity"
           onClick={() => setIsOpen(false)}
         />
 
-        <div className="inline-block w-full max-w-2xl my-16 text-left align-middle transition-all transform">
+        <div className="inline-block w-[100%] max-w-2xl text-left align-middle transition-all transform">
           <SearchChat />
-          {/* <div className="relative bg-white rounded-xl shadow-2xl overflow-hidden">
-            <div className="flex items-center px-4 border-b border-gray-200">
-              <Search className="w-5 h-5 text-gray-400" />
-              <input
-                autoFocus
-                type="text"
-                className="w-full px-4 py-4 text-gray-700 bg-transparent border-none focus:outline-none focus:ring-0"
-                placeholder="Search commands..."
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-              />
-              <div className="w-32 flex items-center gap-1">
-                <kbd className="px-2 py-1 text-xs font-semibold text-gray-500 bg-gray-100 border border-gray-200 rounded-md">
-                  Esc
-                </kbd>
-                <span className="text-gray-400">to close</span>
-              </div>
-            </div>
-
-            <div className="max-h-[60vh] overflow-y-auto">
-              {filteredCommands.length === 0 ? (
-                <div className="px-4 py-14 text-center text-gray-500">
-                  No results found.
-                </div>
-              ) : (
-                <div className="py-2">
-                  {filteredCommands.map((command, index) => (
-                    <div
-                      key={command.id}
-                      className={`px-4 py-3 flex items-center gap-3 cursor-pointer transition-colors ${
-                        selectedIndex === index
-                          ? "bg-blue-50 text-blue-700"
-                          : "text-gray-700 hover:bg-gray-50"
-                      }`}
-                      onClick={() => {
-                        command.action();
-                        setIsOpen(false);
-                      }}
-                    >
-                      <div
-                        className={`${
-                          selectedIndex === index
-                            ? "text-blue-600"
-                            : "text-gray-400"
-                        }`}
-                      >
-                        {command.icon}
-                      </div>
-                      <div>
-                        <div className="font-medium">{command.title}</div>
-                        <div
-                          className={`text-sm ${
-                            selectedIndex === index
-                              ? "text-blue-500"
-                              : "text-gray-500"
-                          }`}
-                        >
-                          {command.description}
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div> */}
         </div>
       </div>
     </div>

vite.config.ts

@@ -18,10 +18,10 @@ export default defineConfig(async () => ({
     host: host || false,
     hmr: host
       ? {
-          protocol: "ws",
+        protocol: "ws",
-          host,
+        host,
-          port: 1421,
+        port: 1421,
-        }
+      }
       : undefined,
     watch: {
       // 3. tell vite to ignore watching `src-tauri`
@@ -40,4 +40,18 @@ export default defineConfig(async () => ({
       },
     },
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom'],
+          lodash: ['lodash'],
+          katex: ['rehype-katex'],
+          highlight: ['rehype-highlight'],
+          mermaid: ['mermaid'],
+        }
+      },
+    },
+    chunkSizeWarningLimit: 600,
+  },
 }));