fix: slash command does not work (#207)

UPDATE_LOG.md

@@ -1,5 +1,9 @@
 # UPDATE LOG
 
+## v0.9.1
+
+fix: slash command does not work
+
 ## v0.9.0
 
 fix:

src-tauri/src/scripts/cmd.js

@@ -87,29 +87,59 @@ $(function() {
     clearInterval(window.formInterval);
   }
   window.formInterval = setInterval(() => {
-    const form = document.querySelector("form");
+    const form = document.querySelector("form textarea");
     if (!form) return;
     clearInterval(window.formInterval);
     cmdTip();
-  }, 200);
+    new MutationObserver(function (mutationsList) {
+      for (const mutation of mutationsList) {
+        if (mutation.target.getAttribute('id') === '__next') {
+          cmdTip();
+        }
+        if (mutation.target.getAttribute('class') === 'chat-model-cmd-list') {
+          // The `chatgpt prompt` fill can be done by clicking on the event.
+          const searchDom = document.querySelector("form .chat-model-cmd-list>div");
+          const searchInput = document.querySelector('form textarea');
+          if (!searchDom) return;
+          searchDom.addEventListener('click', (event) => {
+            const item = event.target.closest("div");
+            if (item) {
+              const val = decodeURIComponent(item.getAttribute('data-prompt'));
+              searchInput.value = val;
+              document.querySelector('form textarea').focus();
+              initDom();
+            }
+          });
+        }
+      }
+    }).observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+  }, 300);
 });
 
 async function cmdTip() {
+  initDom();
   const chatModelJson = await invoke('get_chat_model_cmd') || {};
   const data = chatModelJson.data;
   if (data.length <= 0) return;
 
-  const modelDom = document.createElement('div');
-  modelDom.classList.add('chat-model-cmd-list');
+  let modelDom = document.querySelector('.chat-model-cmd-list');
+  if (!modelDom) {
+    const dom = document.createElement('div');
+    dom.classList.add('chat-model-cmd-list');
+    document.querySelector('form').appendChild(dom);
+    modelDom = document.querySelector('.chat-model-cmd-list');
 
     // fix: tray window
     if (__TAURI_METADATA__.__currentWindow.label === 'tray') {
       modelDom.style.bottom = '54px';
     }
 
-  document.querySelector('form').appendChild(modelDom);
     const itemDom = (v) => `<div class="cmd-item" title="${v.prompt}" data-cmd="${v.cmd}" data-prompt="${encodeURIComponent(v.prompt)}"><b title="${v.cmd}">/${v.cmd}</b><i>${v.act}</i></div>`;
     const renderList = (v) => {
+      initDom();
       modelDom.innerHTML = `<div>${v.map(itemDom).join('')}</div>`;
       window.__CHAT_MODEL_CMD_PROMPT__ = v[0]?.prompt.trim();
       window.__CHAT_MODEL_CMD__ = v[0]?.cmd.trim();
@@ -126,7 +156,7 @@ async function cmdTip() {
 
     // Enter a command starting with `/` and press a space to automatically fill `chatgpt prompt`.
     // If more than one command appears in the search results, the first one will be used by default.
-  searchInput.addEventListener('keydown', (event) => {
+    function cmdKeydown(event) {
       if (!window.__CHAT_MODEL_CMD_PROMPT__) {
         return;
       }
@@ -167,6 +197,9 @@ async function cmdTip() {
         if (strGroup[1]) {
           searchInput.value = `/${window.__CHAT_MODEL_CMD__}` + ` {${strGroup[1]}}` + ' |-> ';
           window.__CHAT_MODEL_STATUS__ = 1;
+        } else {
+          searchInput.value = window.__CHAT_MODEL_CMD_PROMPT__;
+          initDom();
         }
         event.preventDefault();
       }
@@ -201,26 +234,24 @@ async function cmdTip() {
         setPrompt(data[1]);
 
         searchInput.value = window.__CHAT_MODEL_CMD_PROMPT__;
-      modelDom.innerHTML = '';
-      delete window.__CHAT_MODEL_CMD_PROMPT__;
-      delete window.__CHAT_MODEL_CMD__;
-      delete window.__CHAT_MODEL_STATUS__;
+
+        initDom();
         event.preventDefault();
       }
-  });
+    }
+    searchInput.removeEventListener('keydown', cmdKeydown);
+    searchInput.addEventListener('keydown', cmdKeydown);
 
-  searchInput.addEventListener('input', () => {
+    function cmdInput() {
       if (searchInput.value === '') {
-      delete window.__CHAT_MODEL_CMD_PROMPT__;
-      delete window.__CHAT_MODEL_CMD__;
-      delete window.__CHAT_MODEL_STATUS__;
+        initDom();
       }
 
       if (window.__CHAT_MODEL_STATUS__) return;
 
       const query = searchInput.value;
       if (!query || !/^\//.test(query)) {
-      modelDom.innerHTML = '';
+        initDom();
         return;
       }
 
@@ -234,38 +265,20 @@ async function cmdTip() {
       if (result.length > 0) {
         renderList(result);
       } else {
+        initDom();
+      }
+    }
+    searchInput.removeEventListener('input', cmdInput);
+    searchInput.addEventListener('input', cmdInput);
+  }
+}
+
+function initDom() {
+  const modelDom = document.querySelector('.chat-model-cmd-list');
+  if (modelDom) {
     modelDom.innerHTML = '';
     delete window.__CHAT_MODEL_CMD_PROMPT__;
     delete window.__CHAT_MODEL_CMD__;
     delete window.__CHAT_MODEL_STATUS__;
   }
-  }, {
-    capture: false,
-    passive: true,
-    once: false
-  });
-
-  if (window.searchInterval) {
-    clearInterval(window.searchInterval);
-  }
-  window.searchInterval = setInterval(() => {
-    // The `chatgpt prompt` fill can be done by clicking on the event.
-    const searchDom = document.querySelector("form .chat-model-cmd-list>div");
-    if (!searchDom) return;
-    searchDom.addEventListener('click', (event) => {
-      // .cmd-item
-      const item = event.target.closest("div");
-      if (item) {
-        const val = decodeURIComponent(item.getAttribute('data-prompt'));
-        searchInput.value = val;
-        document.querySelector('form textarea').focus();
-        window.__CHAT_MODEL_CMD_PROMPT__ = val;
-        modelDom.innerHTML = '';
-      }
-    }, {
-      capture: false,
-      passive: true,
-      once: false
-    });
-  }, 200);
 }

src-tauri/src/scripts/export.js

@@ -1,8 +1,7 @@
 // *** Core Script - Export ***
 
-const buttonOuterHTMLFallback = `<button class="btn flex justify-center gap-2 btn-neutral" id="download-png-button">Try Again</button>`;
-
 $(async function () {
+  const buttonOuterHTMLFallback = `<button class="btn flex justify-center gap-2 btn-neutral" id="download-png-button">Try Again</button>`;
   if (window.innerWidth < 767) return;
   const chatConf = await invoke('get_chat_conf') || {};
   if (window.buttonsInterval) {
@@ -190,7 +189,7 @@ async function handlePdf(imgData, canvas, pixelRatio) {
 }
 
 function getName() {
-  const id = uid().toString(36);
+  const id = window.crypto.getRandomValues(new Uint32Array(1))[0].toString(36);
   const name = document.querySelector('nav .overflow-y-auto a.hover\\:bg-gray-800')?.innerText?.trim() || '';
   return { filename: name ? name : id, id, pathname: 'chat.download.json' };
 }

src-tauri/src/scripts/popup.core.js

@@ -16,9 +16,9 @@ $(async function () {
     background: #4a4a4a;
     color: white;
     font-weight: bold;
-    padding: 5px 8px;
-    border-radius: 4px;
-    font-size: 12px;
+    padding: 3px 5px;
+    border-radius: 2px;
+    font-size: 10px;
     cursor: pointer;
   }
   `;
@@ -31,6 +31,7 @@ $(async function () {
   const { computePosition, flip, offset, shift } = window.FloatingUIDOM;
 
   document.body.addEventListener('mousedown', async (e) => {
+    selectionMenu.style.display = 'none';
     if (e.target.id === 'chagpt-selection-menu') {
       await invoke('dalle2_window', { query: encodeURIComponent(window.__DALLE2_CONTENT__) });
     } else {

src/hooks/useColumns.tsx

@@ -53,25 +53,25 @@ interface EditRowProps {
 }
 export const EditRow: FC<EditRowProps> = ({ rowKey, row, actions }) => {
   const [isEdit, setEdit] = useState(false);
-  const [val, setVal] = useState(row[rowKey]);
+  const [val, setVal] = useState(row[rowKey] || '');
   const handleEdit = () => {
     setEdit(true);
   };
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setVal(e.target.value)
   };
 
   const handleSave = () => {
     setEdit(false);
-    row[rowKey] = val;
+    row[rowKey] = val?.trim();
     actions?.setRecord(row, 'rowedit')
   };
 
   return isEdit
     ? (
-        <Input.TextArea
+        <Input
           value={val}
-          rows={1}
+          autoFocus
           onChange={handleChange}
           {...DISABLE_AUTO_COMPLETE}
           onPressEnter={handleSave}

src/view/download/index.tsx

@@ -69,7 +69,6 @@ export default function Download() {
       const downloadDir = await path.join(await chatRoot(), 'download');
       await fs.removeDir(downloadDir, { recursive: true });
       await handleRefresh();
-      rowReset();
       message.success('All files have been cleared!');
       return;
     }
@@ -88,6 +87,7 @@ export default function Download() {
 
   const handleRefresh = async () => {
     await invoke('download_list', { pathname: CHAT_DOWNLOAD_JSON, dir: 'download' });
+    rowReset();
     const data = await refreshJson();
     opInit(data);
   };

src/view/notes/index.tsx

@@ -65,7 +65,6 @@ export default function Notes() {
       const notesDir = await path.join(await chatRoot(), 'notes');
       await fs.removeDir(notesDir, { recursive: true });
       await handleRefresh();
-      rowReset();
       message.success('All files have been cleared!');
       return;
     }
@@ -83,6 +82,7 @@ export default function Notes() {
 
   const handleRefresh = async () => {
     await invoke('download_list', { pathname: CHAT_NOTES_JSON, dir: 'notes' });
+    rowReset();
     const data = await refreshJson();
     opInit(data);
   };
@@ -135,6 +135,7 @@ export default function Notes() {
       >
         <ReactMarkdown
           children={source}
+          linkTarget="_blank"
           components={{
             code({node, inline, className, children, ...props}) {
               const match = /language-(\w+)/.exec(className || '')