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

Added indicator of chat thinking when message is empty.

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-24 11:32:36 -03:00
commit edf570f314
2 changed files with 65 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -78,69 +78,75 @@ export default function ChatMessage({
<div className="w-full dark:text-white"> <div className="w-full dark:text-white">
<div className="w-full"> <div className="w-full">
{useMemo( {useMemo(
() => ( () =>
<ReactMarkdown chat.message.toString() === "" && lockChat ? (
remarkPlugins={[remarkGfm, remarkMath]} <IconComponent
rehypePlugins={[rehypeMathjax]} name="MoreHorizontal"
className="markdown prose inline-block break-words text-primary dark:prose-invert className="h-8 w-8 animate-pulse"
/>
) : (
<ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]}
className="markdown prose inline-block break-words text-primary dark:prose-invert
sm:w-[30vw] sm:max-w-[30vw] lg:w-[40vw] lg:max-w-[40vw]" sm:w-[30vw] sm:max-w-[30vw] lg:w-[40vw] lg:max-w-[40vw]"
components={{ components={{
pre({ node, ...props }) { pre({ node, ...props }) {
return <>{props.children}</>; return <>{props.children}</>;
}, },
code: ({ code: ({
node, node,
inline, inline,
className, className,
children, children,
...props ...props
}) => { }) => {
if (children.length) { if (children.length) {
if (children[0] === "▍") { if (children[0] === "▍") {
return ( return (
<span className="form-modal-markdown-span"> <span className="form-modal-markdown-span">
▍ ▍
</span> </span>
);
}
children[0] = (children[0] as string).replace(
"`▍`",
"▍"
); );
} }
children[0] = (children[0] as string).replace( const match = /language-(\w+)/.exec(
"`▍`", className || ""
"▍"
); );
}
const match = /language-(\w+)/.exec( return !inline ? (
className || "" <CodeTabsComponent
); isMessage
tabs={[
return !inline ? ( {
<CodeTabsComponent name: (match && match[1]) || "",
isMessage mode: (match && match[1]) || "",
tabs={[ image:
{ "https://curl.se/logo/curl-symbol-transparent.png",
name: (match && match[1]) || "", language: (match && match[1]) || "",
mode: (match && match[1]) || "", code: String(children).replace(/\n$/, ""),
image: },
"https://curl.se/logo/curl-symbol-transparent.png", ]}
language: (match && match[1]) || "", activeTab={"0"}
code: String(children).replace(/\n$/, ""), setActiveTab={() => {}}
}, />
]} ) : (
activeTab={"0"} <code className={className} {...props}>
setActiveTab={() => {}} {children}
/> </code>
) : ( );
<code className={className} {...props}> },
{children} }}
</code> >
); {chat.message.toString()}
}, </ReactMarkdown>
}} ),
>
{chat.message.toString()}
</ReactMarkdown>
),
[chat.message, chat.message.toString()] [chat.message, chat.message.toString()]
)} )}
</div> </div>

2
src/frontend/src/utils/styleUtils.ts
View file

@ -41,6 +41,7 @@ import {
MessageSquare, MessageSquare,
MessagesSquare, MessagesSquare,
MoonIcon, MoonIcon,
MoreHorizontal,
Paperclip, Paperclip,
Plus, Plus,
Redo, Redo,
@ -268,6 +269,7 @@ export const nodeIconsLucide = {
Copy, Copy,
Upload, Upload,
MessageSquare, MessageSquare,
MoreHorizontal,
}; };
export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> { export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
const sourceId = edge.source; const sourceId = edge.source;