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 5231b0f54..feddbc0d8 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 9c1ffa362..505142de0 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 45193df57..2b9c5ca4f 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)}
--
GitLab