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

Changed chat message button to show entire prompt instead of chat input

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-07 12:03:54 -03:00
commit 1020539ae6
1 changed files with 47 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

98
src/frontend/src/modals/formModal/chatMessage/index.tsx
View file

@ -10,7 +10,7 @@ import remarkGfm from "remark-gfm";
import remarkMath from "remark-math"; import remarkMath from "remark-math";
import { CodeBlock } from "./codeBlock"; import { CodeBlock } from "./codeBlock";
import Convert from "ansi-to-html"; import Convert from "ansi-to-html";
import { User2, MessageSquare } from "lucide-react"; import { User2, MessageSquare, ChevronDown } from "lucide-react";
import { import {
Accordion, Accordion,
AccordionContent, AccordionContent,
@ -31,6 +31,7 @@ export default function ChatMessage({
const convert = new Convert({ newline: true }); const convert = new Convert({ newline: true });
const [hidden, setHidden] = useState(true); const [hidden, setHidden] = useState(true);
const [template, setTemplate] = useState(chat.template); const [template, setTemplate] = useState(chat.template);
const [promptOpen, setPromptOpen] = useState(false);
return ( return (
<div <div
className={classNames( className={classNames(
@ -135,57 +136,52 @@ export default function ChatMessage({
</div> </div>
</div> </div>
) : ( ) : (
<div className="flex w-full items-center"> <div>
<div className="inline-block text-start"> <button
<span className=" break-all text-primary"> className="mb-2 flex items-center gap-4 rounded-md border border-ring/60 bg-muted px-4 py-3 text-base font-semibold"
<Accordion type="single" collapsible className="mb-2 flex"> onClick={() => {
<AccordionItem setPromptOpen((old) => !old);
className=" rounded-md border border-ring/60 bg-muted px-4" }}
value="prompt" >
> Initial Prompt
<AccordionTrigger className="gap-4 text-base font-semibold"> <ChevronDown
Initial Prompt className={
</AccordionTrigger> "h-3 w-3 transition-all " + (promptOpen ? "rotate-180" : "")
<AccordionContent className="max-h-96 overflow-auto break-all p-2"> }
{ />
// Make all the variables that are inside curly braces bold </button>
template.split("\n").map((line, index) => { <span className="prose inline-block break-words text-primary dark:prose-invert">
const regex = /{([^}]+)}/g; {promptOpen
let match; ? template.split("\n").map((line, index) => {
let parts = []; const regex = /{([^}]+)}/g;
let lastIndex = 0; let match;
while ((match = regex.exec(line)) !== null) { let parts = [];
// Push text up to the match let lastIndex = 0;
if (match.index !== lastIndex) { while ((match = regex.exec(line)) !== null) {
parts.push(line.substring(lastIndex, match.index)); // Push text up to the match
} if (match.index !== lastIndex) {
// Push div with matched text parts.push(line.substring(lastIndex, match.index));
if (chat.message[match[1]]) {
parts.push(
<span className="my-1 rounded-md bg-indigo-100">
{chat.message[match[1]]}
</span>
);
}
// Update last index
lastIndex = regex.lastIndex;
}
// Push text after the last match
if (lastIndex !== line.length) {
parts.push(line.substring(lastIndex));
}
return <p>{parts}</p>;
})
} }
</AccordionContent> // Push div with matched text
</AccordionItem> if (chat.message[match[1]]) {
</Accordion> parts.push(
<span className="prose text-primary dark:prose-invert"> <span className="my-1 rounded-md bg-indigo-100">
{chat.message[chat.chatKey]} {chat.message[match[1]]}
</span> </span>
</span> );
</div> }
// Update last index
lastIndex = regex.lastIndex;
}
// Push text after the last match
if (lastIndex !== line.length) {
parts.push(line.substring(lastIndex));
}
return <p>{parts}</p>;
})
: chat.message[chat.chatKey]}
</span>
</div> </div>
)} )}
</div> </div>