This commit is contained in:
timothycarambat 2024-05-10 14:10:07 -07:00
parent 8f068b80d7
commit 2345424b03
3 changed files with 21 additions and 16 deletions
frontend/src/components/WorkspaceChat/ChatContainer
ChatHistory/HistoricalMessage
PromptInput
index.jsx

View file

@ -23,8 +23,9 @@ const HistoricalMessage = ({
return (
<div
key={uuid}
className={`flex justify-center items-end w-full ${role === "user" ? USER_BACKGROUND_COLOR : AI_BACKGROUND_COLOR
}`}
className={`flex justify-center items-end w-full ${
role === "user" ? USER_BACKGROUND_COLOR : AI_BACKGROUND_COLOR
}`}
>
<div
className={`py-8 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
@ -99,9 +100,9 @@ export default memo(
// and the chatID matches between renders. (feedback icons)
(prevProps, nextProps) => {
return (
(prevProps.message === nextProps.message) &&
(prevProps.isLastMessage === nextProps.isLastMessage) &&
(prevProps.chatId === nextProps.chatId)
prevProps.message === nextProps.message &&
prevProps.isLastMessage === nextProps.isLastMessage &&
prevProps.chatId === nextProps.chatId
);
}
);
);

View file

@ -13,7 +13,7 @@ import AvailableAgentsButton, {
} from "./AgentMenu";
import TextSizeButton from "./TextSizeMenu";
export const PROMPT_INPUT_EVENT = 'set_prompt_input';
export const PROMPT_INPUT_EVENT = "set_prompt_input";
export default function PromptInput({
submit,
onChange,
@ -21,7 +21,7 @@ export default function PromptInput({
buttonDisabled,
sendCommand,
}) {
const [promptInput, setPromptInput] = useState('');
const [promptInput, setPromptInput] = useState("");
const { showAgents, setShowAgents } = useAvailableAgents();
const { showSlashCommand, setShowSlashCommand } = useSlashCommands();
const formRef = useRef(null);
@ -31,12 +31,14 @@ export default function PromptInput({
// To prevent too many re-renders we remotely listen for updates from the parent
// via an event cycle. Otherwise, using message as a prop leads to a re-render every
// change on the input.
function handlePromptUpdate(e) { setPromptInput(e?.detail ?? ''); }
function handlePromptUpdate(e) {
setPromptInput(e?.detail ?? "");
}
useEffect(() => {
if (!!window) window.addEventListener(PROMPT_INPUT_EVENT, handlePromptUpdate);
return () => (
window?.removeEventListener(PROMPT_INPUT_EVENT, handlePromptUpdate)
)
if (!!window)
window.addEventListener(PROMPT_INPUT_EVENT, handlePromptUpdate);
return () =>
window?.removeEventListener(PROMPT_INPUT_EVENT, handlePromptUpdate);
}, []);
useEffect(() => {
@ -115,7 +117,7 @@ export default function PromptInput({
watchForSlash(e);
watchForAt(e);
adjustTextArea(e);
setPromptInput(e.target.value)
setPromptInput(e.target.value);
}}
onKeyDown={captureEnter}
required={true}

View file

@ -28,9 +28,11 @@ export default function ChatContainer({ workspace, knownHistory = [] }) {
// Emit an update to the sate of the prompt input without directly
// passing a prop in so that it does not re-render constantly.
function setMessageEmit(messageContent = '') {
function setMessageEmit(messageContent = "") {
setMessage(messageContent);
window.dispatchEvent(new CustomEvent(PROMPT_INPUT_EVENT, { detail: messageContent }))
window.dispatchEvent(
new CustomEvent(PROMPT_INPUT_EVENT, { detail: messageContent })
);
}
const handleSubmit = async (event) => {