Merge branch 'form_io' of github.com:logspace-ai/langflow into form_io

src/frontend/src/modals/codeAreaModal/index.tsx

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

src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx

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

src/frontend/src/modals/formModal/chatMessage/index.tsx

@@ -1,6 +1,6 @@
 import Convert from "ansi-to-html";
 import { ChevronDown } from "lucide-react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
 import remarkGfm from "remark-gfm";
@@ -75,13 +75,21 @@ export default function ChatMessage({
             <div className="w-full">
               <div className="w-full dark:text-white">
                 <div className="w-full">
+                  {useMemo(
+                    () => (
                       <ReactMarkdown
                         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]"
                         components={{
-                      code({ node, inline, className, children, ...props }) {
+                          code: ({
+                            node,
+                            inline,
+                            className,
+                            children,
+                            ...props
+                          }) => {
                             if (children.length) {
                               if (children[0] === "▍") {
                                 return (
@@ -97,7 +105,9 @@ export default function ChatMessage({
                               );
                             }
 
-                        const match = /language-(\w+)/.exec(className || "");
+                            const match = /language-(\w+)/.exec(
+                              className || ""
+                            );
 
                             return !inline ? (
                               <CodeBlock
@@ -116,6 +126,9 @@ export default function ChatMessage({
                       >
                         {chat.message.toString()}
                       </ReactMarkdown>
+                    ),
+                    [chat.message.toString()]
+                  )}
                 </div>
                 {chat.files && (
                   <div className="my-2 w-full">
@@ -138,6 +151,8 @@ export default function ChatMessage({
         </div>
       ) : (
         <div>
+          {template && (
+            <>
               <button
                 className="form-modal-initial-prompt-btn"
                 onClick={() => {
@@ -183,6 +198,9 @@ export default function ChatMessage({
                     })
                   : chat.message[chat.chatKey]}
               </span>
+            </>
+          )}
+          {chat.message[chat.chatKey]}
         </div>
       )}
     </div>