playground updation

app/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "app",
   "private": true,
-  "version": "0.0.24",
+  "version": "0.0.25",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,6 +19,7 @@
     "@types/react-syntax-highlighter": "^15.5.7",
     "antd": "^5.5.2",
     "axios": "^1.4.0",
+    "eventsource-parser": "^1.0.0",
     "js-cookie": "^3.0.5",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
@@ -27,11 +28,14 @@
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.11.2",
     "react-syntax-highlighter": "^15.5.0",
+    "rehype-mathjax": "^4.0.3",
     "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1",
     "sort-by": "^1.2.0",
     "zustand": "^4.3.9"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
     "@types/js-cookie": "^3.0.3",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",

app/ui/src/components/Bot/DS/NewDsForm.tsx

@@ -1,21 +1,11 @@
 import { useState } from "react";
-import {
-  GlobeAltIcon,
-  // DocumentArrowUpIcon,
-  DocumentTextIcon,
-} from "@heroicons/react/20/solid";
 import { Form, notification } from "antd";
 import { useParams } from "react-router-dom";
 import api from "../../../services/api";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { BotForm } from "../../Common/BotForm";
 import axios from "axios";
 
-const availableSources = [
-  { id: 1, title: "Website", icon: GlobeAltIcon },
-  // { id: 2, title: "PDF", icon: DocumentArrowUpIcon },
-  { id: 3, title: "Text", icon: DocumentTextIcon },
-];
 // @ts-ignore
 function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
@@ -62,10 +52,12 @@ export const NewDsForm = ({ onClose }: { onClose: () => void }) => {
         description: "New Source added successfully.",
       });
       form.resetFields();
-      setSelectedSource(availableSources[0]);
+      setSelectedSource({
+        id: 1,
+        value: "Website",
+      });
     },
     onError: (e) => {
-      console.log(e);
       if (axios.isAxiosError(e)) {
         const message =
           e.response?.data?.message ||

app/ui/src/components/Bot/Playground/Form.tsx

@@ -1,10 +1,25 @@
 import { useMutation } from "@tanstack/react-query";
 import { useMessage } from "../../../hooks/useMessage";
 import { useForm } from "@mantine/form";
+import React from "react";
 
 export const PlaygroundgForm = () => {
   const { onSubmit } = useMessage();
 
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+  React.useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      const increaseHeight = () => {
+        textarea.style.height = "auto";
+        textarea.style.height = `${Math.min(textarea.scrollHeight, 300)}px`;
+      };
+      increaseHeight();
+      textarea.addEventListener("input", increaseHeight);
+      return () => textarea.removeEventListener("input", increaseHeight);
+    }
+  }, []);
+
   const form = useForm({
     initialValues: {
       message: "",
@@ -24,13 +39,21 @@ export const PlaygroundgForm = () => {
     }
   );
 
+  const resetHeight = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+    }
+  };
+
   return (
     <div className="p-3 ">
       <div className="flex-grow space-y-6">
         <div className="flex">
           <form
             onSubmit={form.onSubmit(async (value) => {
               form.reset();
+              resetHeight();
               await sendMessage(value.message);
             })}
             className="shrink-0 flex-grow  flex items-center "
@@ -44,16 +67,14 @@ export const PlaygroundgForm = () => {
                     e.preventDefault();
                     form.onSubmit(async (value) => {
                       form.reset();
+                      resetHeight();
                       await sendMessage(value.message);
-                      // await sendMessage(value.message);
+                      // reset the height of the textarea
                     })();
                   }
                 }}
-                style={{
-                  height: "24px",
-                  maxHeight: "200px",
-                  overflowY: "hidden",
-                }}
+                ref={textareaRef}
+                rows={1}
                 className="m-0 w-full resize-none border-0 bg-transparent p-0 pr-7 focus:ring-0 focus-visible:ring-0 dark:bg-transparent pl-2 md:pl-0"
                 required
                 placeholder="Type your message…"

app/ui/src/components/Common/Markdown.tsx

@@ -1,26 +1,76 @@
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { atomDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import remarkGfm from "remark-gfm";
+import { nightOwl } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import rehypeMathjax from "rehype-mathjax";
+import remarkMath from "remark-math";
 import ReactMarkdown from "react-markdown";
+import { ClipboardIcon, CheckIcon } from "@heroicons/react/24/outline";
+import React from "react";
+// import { useMessage } from "../../hooks/useMessage";
 
 export default function Markdown({ message }: { message: string }) {
+  const [isBtnPressed, setIsBtnPressed] = React.useState(false);
+
+  // const { isProcessing } = useMessage();
+
+  React.useEffect(() => {
+    if (isBtnPressed) {
+      setTimeout(() => {
+        setIsBtnPressed(false);
+      }, 4000);
+    }
+  }, [isBtnPressed]);
+
   return (
     <ReactMarkdown
-      className="markdown"
-      remarkPlugins={[remarkGfm]}
+      className={`prose-invert flex-1 `}
+      // white space
+      remarkPlugins={[remarkGfm, remarkMath]}
+      rehypePlugins={[rehypeMathjax]}
       components={{
         code({ node, inline, className, children, ...props }) {
           const match = /language-(\w+)/.exec(className || "");
-          return !inline && match ? (
-            <SyntaxHighlighter
-              {...props}
-              children={String(children).replace(/\n$/, "")}
-              style={atomDark}
-              language={match[1]}
-              PreTag="div"
-            />
+          return !inline ? (
+            <div className="code relative text-base bg-gray-800 rounded-md overflow-hidden">
+              <div className="flex items-center justify-between py-1.5 px-4">
+                <span className="text-xs lowercase text-gray-200">
+                  {className && className.replace("language-", "")}
+                </span>
+
+                <div className="flex items-center">
+                  <button
+                    onClick={() => {
+                      navigator.clipboard.writeText(children[0] as string);
+                      setIsBtnPressed(true);
+                    }}
+                    className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-200 hover:bg-gray-700 hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                  >
+                    {!isBtnPressed ? (
+                      <ClipboardIcon className="h-4 w-4" />
+                    ) : (
+                      <CheckIcon className="h-4 w-4 text-green-400" />
+                    )}
+                  </button>
+                </div>
+              </div>
+              <SyntaxHighlighter
+                {...props}
+                children={String(children).replace(/\n$/, "")}
+                style={nightOwl}
+                key={Math.random()}
+                customStyle={{
+                  margin: 0,
+                  fontSize: "1rem",
+                  lineHeight: "1.5rem",
+                }}
+                language={(match && match[1]) || ""}
+                codeTagProps={{
+                  className: "text-sm",
+                }}
+              />
+            </div>
           ) : (
-            <code className={`${className} bg-gray-200 rounded-md p-1 text-sm`} {...props}>
+            <code className={`${className} font-semibold`} {...props}>
               {children}
             </code>
           );