auto highlight slash command on typing (#743)

embed/src/components/ChatWindow/ChatContainer/PromptInput/index.jsx

@@ -2,7 +2,6 @@ import { CircleNotch, PaperPlaneRight } from "@phosphor-icons/react";
 import React, { useState, useRef } from "react";
 
 export default function PromptInput({
-  setttings,
   message,
   submit,
   onChange,

embed/src/components/ChatWindow/ChatContainer/index.jsx

@@ -79,7 +79,6 @@ export default function ChatContainer({
     <div className="h-full w-full relative">
       <ChatHistory settings={settings} history={chatHistory} />
       <PromptInput
-        settings={settings}
         message={message}
         submit={handleSubmit}
         onChange={handleMessageChange}

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx

@@ -5,6 +5,7 @@ import SlashCommandsButton, {
   useSlashCommands,
 } from "./SlashCommands";
 import { isMobile } from "react-device-detect";
+import debounce from "lodash.debounce";
 
 export default function PromptInput({
   workspace,
@@ -24,6 +25,13 @@ export default function PromptInput({
     submit(e);
   };
 
+  const checkForSlash = (e) => {
+    const input = e.target.value;
+    if (input === "/") setShowSlashCommand(true);
+    if (showSlashCommand) setShowSlashCommand(false);
+    return;
+  };
+
   const captureEnter = (event) => {
     if (event.keyCode == 13) {
       if (!event.shiftKey) {
@@ -42,6 +50,7 @@ export default function PromptInput({
         : "1px";
   };
 
+  const watchForSlash = debounce(checkForSlash, 300);
   return (
     <div className="w-full fixed md:absolute bottom-0 left-0 z-10 md:z-0 flex justify-center items-center">
       <SlashCommands
@@ -59,7 +68,10 @@ export default function PromptInput({
               <textarea
                 onKeyUp={adjustTextArea}
                 onKeyDown={captureEnter}
-                onChange={onChange}
+                onChange={(e) => {
+                  onChange(e);
+                  watchForSlash(e);
+                }}
                 required={true}
                 disabled={inputDisabled}
                 onFocus={() => setFocused(true)}