Refactor Paste action + Support Markdown editing

Author: XInTheDark

src/aiChat.jsx

@@ -19,11 +19,12 @@ import { init } from "#root/src/api/init.js";
 
 import { watch } from "node:fs/promises";
 
-import { current_datetime, formatDate, removePrefix, getFileFromURL } from "./helpers/helper.js";
+import { current_datetime, formatDate, removePrefix } from "./helpers/helper.js";
 import { plainTextMarkdown } from "./helpers/markdown.js";
 import throttle, { AIChatDelayFunction } from "#root/src/helpers/throttle.js";
 
 import { help_action, help_action_panel } from "./helpers/helpPage.jsx";
+import { PasteAction } from "./components/actions/pasteAction.jsx";
 import { autoCheckForUpdates } from "./helpers/update.jsx";
 import { confirmClearData, tryRecoverJSON } from "./helpers/aiChatHelper.jsx";
 
@@ -579,7 +580,7 @@ export default function Chat({ launchContext }) {
         </Form.Dropdown>
 
         <Form.Description title="System Prompt" text="This prompt will be sent to GPT to start the conversation." />
-        <Form.TextArea id="systemPrompt" defaultValue={chat?.systemPrompt ?? ""} />
+        <Form.TextArea id="systemPrompt" defaultValue={chat?.systemPrompt ?? ""} enableMarkdown />
       </>
     );
   };
@@ -702,25 +703,7 @@ export default function Chat({ launchContext }) {
                 }
               }}
             />
-            <Action
-              title="Paste"
-              icon={Icon.Clipboard}
-              onAction={async () => {
-                let { text, file } = await Clipboard.read();
-                setInput((oldInput) => {
-                  let newInput = structuredClone(oldInput);
-                  if (file) {
-                    file = getFileFromURL(file);
-                    newInput.files = [...(oldInput.files ?? []), file];
-                  } else {
-                    // Only set the text if there is no file, otherwise it's just the file name
-                    newInput.message += text;
-                  }
-                  return newInput;
-                });
-              }}
-              shortcut={{ modifiers: ["cmd"], key: "v" }}
-            />
+            {PasteAction(setInput)}
           </ActionPanel>
         }
       >
@@ -729,6 +712,7 @@ export default function Chat({ launchContext }) {
           title="Message"
           value={input.message}
           onChange={(message) => setInput({ ...input, message })}
+          enableMarkdown
         />
         <Form.FilePicker
           id="files"

src/api/gpt.jsx

@@ -1,7 +1,6 @@
 import {
   Action,
   ActionPanel,
-  Clipboard,
   confirmAlert,
   Detail,
   Form,
@@ -21,13 +20,14 @@ import * as providers from "./providers.js";
 import throttle, { AIChatDelayFunction } from "#root/src/helpers/throttle.js";
 
 import { help_action } from "../helpers/helpPage.jsx";
+import { PasteAction } from "../components/actions/pasteAction.jsx";
 import { autoCheckForUpdates } from "../helpers/update.jsx";
 
 import { init } from "../api/init.js";
 import { Message, pairs_to_messages } from "../classes/message.js";
 import { Preferences } from "./preferences.js";
 
-import { getFileFromURL, truncate_chat } from "../helpers/helper.js";
+import { truncate_chat } from "../helpers/helper.js";
 import { plainTextMarkdown } from "../helpers/markdown.js";
 import { getFormattedWebResult, systemResponse, web_search_mode, webSystemPrompt } from "./tools/web";
 
@@ -463,25 +463,7 @@ export default (
               await getResponse(prompt, { files: files });
             }}
           />
-          <Action
-            title="Paste"
-            icon={Icon.Clipboard}
-            onAction={async () => {
-              let { text, file } = await Clipboard.read();
-              setInput((oldInput) => {
-                let newInput = structuredClone(oldInput);
-                if (allowUploadFiles && file) {
-                  file = getFileFromURL(file);
-                  newInput.files = [...(oldInput.files ?? []), file];
-                } else {
-                  // Only set the text if there is no file, otherwise it's just the file name
-                  newInput.message += text;
-                }
-                return newInput;
-              });
-            }}
-            shortcut={{ modifiers: ["cmd"], key: "v" }}
-          />
+          {PasteAction(setInput)}
         </ActionPanel>
       }
     >
@@ -490,6 +472,7 @@ export default (
         title={showFormText}
         value={input.message}
         onChange={(message) => setInput({ ...input, message })}
+        enableMarkdown
       />
       {allowUploadFiles && (
         <Form.FilePicker

src/components/actions/pasteAction.jsx

@@ -0,0 +1,37 @@
+import { Action, Clipboard, Icon, showToast, Toast } from "@raycast/api";
+import { getFileFromURL } from "#root/src/helpers/helper.js";
+
+export const PasteAction = (setInput) => {
+  return (
+    <Action
+      title="Paste"
+      icon={Icon.Clipboard}
+      onAction={async () => {
+        // Show a toast if the operation takes some time
+        let toast = null;
+        const timeout = setTimeout(() => {
+          toast = showToast(Toast.Style.Animated, "Pasting");
+        }, 100);
+
+        let { text, file } = await Clipboard.read();
+        setInput((oldInput) => {
+          let newInput = structuredClone(oldInput);
+          if (file) {
+            file = getFileFromURL(file);
+            newInput.files = [...(oldInput.files ?? []), file];
+          } else {
+            // Only set the text if there is no file, otherwise it's just the file name
+            newInput.message += text;
+          }
+          return newInput;
+        });
+
+        clearTimeout(timeout);
+        if (toast) {
+          await (await toast).hide();
+        }
+      }}
+      shortcut={{ modifiers: ["cmd"], key: "v" }}
+    />
+  );
+};

src/components/preferences/manageAIPresets.jsx

@@ -103,7 +103,7 @@ export const ManageAIPresets = () => {
         </Form.Dropdown>
 
         <Form.Description title="System Prompt" text="This prompt will be sent to GPT to start the conversation." />
-        <Form.TextArea id="systemPrompt" defaultValue={preset.systemPrompt} />
+        <Form.TextArea id="systemPrompt" defaultValue={preset.systemPrompt} enableMarkdown />
 
         <Form.Checkbox id="isDefault" label="Set as Default" defaultValue={preset.isDefault} />
       </Form>