From 755df4dbba1bd7bbf697ebf407fe4ebeba646bc4 Mon Sep 17 00:00:00 2001
From: Timothy Carambat <rambat1010@gmail.com>
Date: Mon, 19 Feb 2024 10:32:53 -0800
Subject: [PATCH] auto highlight slash command on typing (#743)

---
 .../ChatWindow/ChatContainer/PromptInput/index.jsx |  1 -
 .../components/ChatWindow/ChatContainer/index.jsx  |  1 -
 .../ChatContainer/PromptInput/index.jsx            | 14 +++++++++++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/embed/src/components/ChatWindow/ChatContainer/PromptInput/index.jsx b/embed/src/components/ChatWindow/ChatContainer/PromptInput/index.jsx
index 5231b0f5..feddbc0d 100644
--- a/embed/src/components/ChatWindow/ChatContainer/PromptInput/index.jsx
+++ b/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,
diff --git a/embed/src/components/ChatWindow/ChatContainer/index.jsx b/embed/src/components/ChatWindow/ChatContainer/index.jsx
index 9c1ffa36..505142de 100644
--- a/embed/src/components/ChatWindow/ChatContainer/index.jsx
+++ b/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}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
index 45193df5..2b9c5ca4 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
+++ b/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)}