jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Added placeholder message when a chat key does not exist

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-10 19:24:02 -03:00
commit 20644a83bc
2 changed files with 25 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/frontend/src/index.css
View file

@ -917,11 +917,14 @@ The cursor: default; property value restores the browser's default cursor style
.form-modal-lock-true { .form-modal-lock-true {
@apply bg-input text-black dark:bg-gray-700 dark:text-gray-300 @apply bg-input text-black dark:bg-gray-700 dark:text-gray-300
} }
.form-modal-no-input {
@apply bg-input text-center text-black dark:bg-gray-700 dark:text-gray-300
}
.form-modal-lock-false { .form-modal-lock-false {
@apply bg-white text-black dark:bg-gray-900 dark:text-gray-300 @apply bg-white text-black dark:bg-gray-900 dark:text-gray-300
} }
.form-modal-lockchat { .form-modal-lockchat {
@apply form-input block w-full rounded-md border-gray-300 p-4 pr-16 custom-scroll dark:border-gray-600 sm:text-sm @apply form-input focus:ring-ring focus:border-ring block w-full rounded-md border-gray-300 p-4 pr-16 custom-scroll dark:border-gray-600 sm:text-sm
} }
.form-modal-send-icon-position { .form-modal-send-icon-position {
@apply absolute bottom-2 right-4 @apply absolute bottom-2 right-4
@ -935,6 +938,9 @@ The cursor: default; property value restores the browser's default cursor style
.form-modal-send-icon { .form-modal-send-icon {
@apply mr-2 h-5 w-5 rotate-[44deg] @apply mr-2 h-5 w-5 rotate-[44deg]
} }
.form-modal-play-icon {
@apply h-5 w-5 mx-1
}
.form-modal-chat-position { .form-modal-chat-position {
@apply flex-max-width px-2 py-6 pl-4 pr-9 @apply flex-max-width px-2 py-6 pl-4 pr-9
} }

23
src/frontend/src/modals/formModal/chatInput/index.tsx
View file

@ -1,4 +1,4 @@
import { Lock, LucideSend } from "lucide-react"; import { Lock, LucideSend, Sparkles } from "lucide-react";
import { useEffect } from "react"; import { useEffect } from "react";
import { classNames } from "../../../utils"; import { classNames } from "../../../utils";
@ -49,24 +49,37 @@ export default function ChatInput({
setChatValue(e.target.value); setChatValue(e.target.value);
}} }}
className={classNames( className={classNames(
lockChat || noInput lockChat
? " form-modal-lock-true bg-input " ? " form-modal-lock-true bg-input"
: noInput
? "form-modal-no-input bg-input"
: " form-modal-lock-false", : " form-modal-lock-false",
"form-modal-lockchat" "form-modal-lockchat"
)} )}
placeholder={"Send a message..."} placeholder={
noInput
? "No chat input variables found. Click to run your flow."
: "Send a message..."
}
/> />
<div className="form-modal-send-icon-position"> <div className="form-modal-send-icon-position">
<button <button
className={classNames( className={classNames(
"form-modal-send-button", "form-modal-send-button",
chatValue === "" ? "text-primary" : " bg-indigo-600 text-background" noInput
? "bg-indigo-600 text-background"
: chatValue === ""
? "text-primary"
: "bg-emerald-600 text-background"
)} )}
disabled={lockChat} disabled={lockChat}
onClick={() => sendMessage()} onClick={() => sendMessage()}
> >
{lockChat ? ( {lockChat ? (
<Lock className="form-modal-lock-icon" aria-hidden="true" /> <Lock className="form-modal-lock-icon" aria-hidden="true" />
) : noInput ? (
<Sparkles className="form-modal-play-icon" aria-hidden="true" />
) : ( ) : (
<LucideSend className="form-modal-send-icon " aria-hidden="true" /> <LucideSend className="form-modal-send-icon " aria-hidden="true" />
)} )}