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

Merge branch 'form_io' of personal:logspace-ai/langflow into form_io

Browse source
This commit is contained in:
anovazzi1 2023-07-10 20:45:02 -03:00
commit 5d2b8425ba
8 changed files with 137 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -48,8 +48,8 @@ export default function CodeAreaComponent({
className={ className={
editNode editNode
? "input-edit-node input-dialog" ? "input-edit-node input-dialog"
: (disabled ? " input-disable " : "") + : (disabled ? " input-disable input-ring " : "") +
" input-dialog input-primary" " input-primary text-muted-foreground "
} }
> >
{myValue !== "" ? myValue : "Type something..."} {myValue !== "" ? myValue : "Type something..."}

4
src/frontend/src/components/promptComponent/index.tsx
View file

@ -69,8 +69,8 @@ export default function PromptAreaComponent({
className={ className={
editNode editNode
? "input-edit-node input-dialog" ? "input-edit-node input-dialog"
: (disabled ? " input-disable " : "") + : (disabled ? " input-disable text-ring " : "") +
" input-dialog input-primary" " input-primary text-muted-foreground "
} }
> >
{myValue !== "" ? myValue : "Type your prompt here"} {myValue !== "" ? myValue : "Type your prompt here"}

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

@ -216,7 +216,7 @@ The cursor: default; property value restores the browser's default cursor style
@apply input-primary pr-7 mx-2 @apply input-primary pr-7 mx-2
} }
.input-disable{ .input-disable{
@apply bg-input text-muted-foreground @apply bg-border placeholder:text-ring border-transparent
} }
.input-dialog{ .input-dialog{
@apply text-ring cursor-pointer bg-transparent @apply text-ring cursor-pointer bg-transparent
@ -920,11 +920,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 @apply bg-input text-black
} }
.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 @apply bg-white text-black
} }
.form-modal-lockchat { .form-modal-lockchat {
@apply form-input block w-full rounded-md border-border p-4 pr-16 custom-scroll sm:text-sm @apply form-input focus:ring-ring focus:border-ring block w-full rounded-md border-border p-4 pr-16 custom-scroll 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
@ -938,6 +941,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
} }

5
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -5,7 +5,7 @@ import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/theme-twilight"; import "ace-builds/src-noconflict/theme-twilight";
import { TerminalSquare } from "lucide-react"; import { TerminalSquare } from "lucide-react";
import { useContext, useEffect, useRef, useState } from "react"; import { useContext, useRef, useState } from "react";
import AceEditor from "react-ace"; import AceEditor from "react-ace";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants"; import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
@ -37,9 +37,6 @@ export default function CodeAreaModal({
detail: { error: string; traceback: string }; detail: { error: string; traceback: string };
}>(null); }>(null);
const ref = useRef(); const ref = useRef();
useEffect(() => {
setValue(code);
}, [code, setValue]);
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
if (x === false) { if (x === false) {

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" />
)} )}

8
src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx
View file

@ -1,5 +1,5 @@
import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react"; import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react";
import { FC, memo, useState } from "react"; import { useState } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { programmingLanguages } from "../../../../utils"; import { programmingLanguages } from "../../../../utils";
@ -9,7 +9,7 @@ interface Props {
value: string; value: string;
} }
export const CodeBlock: FC<Props> = memo(({ language, value }) => { export function CodeBlock({ language, value }) {
const [isCopied, setIsCopied] = useState<Boolean>(false); const [isCopied, setIsCopied] = useState<Boolean>(false);
const copyToClipboard = () => { const copyToClipboard = () => {
@ -63,7 +63,7 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
</div> </div>
<SyntaxHighlighter <SyntaxHighlighter
className=" w-[47vw]" className="overflow-auto"
language={language} language={language}
style={oneDark} style={oneDark}
customStyle={{ margin: 0 }} customStyle={{ margin: 0 }}
@ -72,5 +72,5 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
</SyntaxHighlighter> </SyntaxHighlighter>
</div> </div>
); );
}); }
CodeBlock.displayName = "CodeBlock"; CodeBlock.displayName = "CodeBlock";

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

@ -1,6 +1,6 @@
import Convert from "ansi-to-html"; import Convert from "ansi-to-html";
import { ChevronDown } from "lucide-react"; import { ChevronDown } from "lucide-react";
import { useState } from "react"; import { useMemo, useState } from "react";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import rehypeMathjax from "rehype-mathjax"; import rehypeMathjax from "rehype-mathjax";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
@ -75,47 +75,60 @@ export default function ChatMessage({
<div className="w-full"> <div className="w-full">
<div className="w-full dark:text-white"> <div className="w-full dark:text-white">
<div className="w-full"> <div className="w-full">
<ReactMarkdown {useMemo(
remarkPlugins={[remarkGfm, remarkMath]} () => (
rehypePlugins={[rehypeMathjax]} <ReactMarkdown
className="markdown prose inline-block break-words text-primary remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]}
className="markdown prose inline-block break-words text-primary
dark:prose-invert sm:max-w-[30vw] lg:max-w-[40vw]" dark:prose-invert sm:max-w-[30vw] lg:max-w-[40vw]"
components={{ components={{
code({ node, inline, className, children, ...props }) { code: ({
if (children.length) { node,
if (children[0] === "▍") { inline,
return ( className,
<span className="form-modal-markdown-span"> children,
▍ ...props
</span> }) => {
if (children.length) {
if (children[0] === "▍") {
return (
<span className="form-modal-markdown-span">
▍
</span>
);
}
children[0] = (children[0] as string).replace(
"`▍`",
"▍"
);
}
const match = /language-(\w+)/.exec(
className || ""
); );
}
children[0] = (children[0] as string).replace( return !inline ? (
"`▍`", <CodeBlock
"▍" key={Math.random()}
); language={(match && match[1]) || ""}
} value={String(children).replace(/\n$/, "")}
{...props}
const match = /language-(\w+)/.exec(className || ""); />
) : (
return !inline ? ( <code className={className} {...props}>
<CodeBlock {children}
key={Math.random()} </code>
language={(match && match[1]) || ""} );
value={String(children).replace(/\n$/, "")} },
{...props} }}
/> >
) : ( {chat.message.toString()}
<code className={className} {...props}> </ReactMarkdown>
{children} ),
</code> [chat.message.toString()]
); )}
},
}}
>
{chat.message.toString()}
</ReactMarkdown>
</div> </div>
{chat.files && ( {chat.files && (
<div className="my-2 w-full"> <div className="my-2 w-full">
@ -138,51 +151,56 @@ export default function ChatMessage({
</div> </div>
) : ( ) : (
<div> <div>
<button {template && (
className="form-modal-initial-prompt-btn" <>
onClick={() => { <button
setPromptOpen((old) => !old); className="form-modal-initial-prompt-btn"
}} onClick={() => {
> setPromptOpen((old) => !old);
Display Prompt }}
<ChevronDown >
className={ Display Prompt
"h-3 w-3 transition-all " + (promptOpen ? "rotate-180" : "") <ChevronDown
} className={
/> "h-3 w-3 transition-all " + (promptOpen ? "rotate-180" : "")
</button> }
<span className="prose inline-block break-words text-primary dark:prose-invert"> />
{promptOpen </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( // Push div with matched text
<span className="my-1 rounded-md bg-indigo-100"> if (chat.message[match[1]]) {
{chat.message[match[1]]} parts.push(
</span> <span className="my-1 rounded-md bg-indigo-100">
); {chat.message[match[1]]}
} </span>
);
}
// Update last index // Update last index
lastIndex = regex.lastIndex; lastIndex = regex.lastIndex;
} }
// Push text after the last match // Push text after the last match
if (lastIndex !== line.length) { if (lastIndex !== line.length) {
parts.push(line.substring(lastIndex)); parts.push(line.substring(lastIndex));
} }
return <p>{parts}</p>; return <p>{parts}</p>;
}) })
: chat.message[chat.chatKey]} : chat.message[chat.chatKey]}
</span> </span>
</>
)}
{chat.message[chat.chatKey]}
</div> </div>
)} )}
</div> </div>