Add dependencies and update code for PDF parsing and searching

src/components/Common/Markdown.tsx

@@ -24,7 +24,7 @@ export default function Markdown({ message }: { message: string }) {
   return (
     <React.Fragment>
       <ReactMarkdown
-        className="prose break-words dark:prose-invert text-sm prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark"
+        className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark"
         remarkPlugins={[remarkGfm, remarkMath]}
         rehypePlugins={[rehypeMathjax]}
         components={{

src/components/Common/Playground/Message.tsx

@@ -1,8 +1,9 @@
 import Markdown from "../../Common/Markdown"
 import React from "react"
-import { Image } from "antd"
+import { Image, Tooltip } from "antd"
 import { ClipboardIcon } from "~icons/ClipboardIcon"
 import { CheckIcon } from "~icons/CheckIcon"
+import { ArrowPathIcon } from "~icons/ArrowPathIcon"
 
 type Props = {
   message: string
@@ -12,22 +13,20 @@ type Props = {
   isBot: boolean
   name: string
   images?: string[]
+  currentMessageIndex: number
+  totalMessages: number
+  onRengerate: () => void
+  isProcessing: boolean
+  webSearch?: {
+    
+  }
 }
 
 export const PlaygroundMessage = (props: Props) => {
   const [isBtnPressed, setIsBtnPressed] = React.useState(false)
 
-  React.useEffect(() => {
-    if (isBtnPressed) {
-      setTimeout(() => {
-        setIsBtnPressed(false)
-      }, 4000)
-    }
-  }, [isBtnPressed])
-
   return (
-    <div
-      className={`group w-full text-gray-800 dark:text-gray-100`}>
+    <div className="group w-full text-gray-800 dark:text-gray-100">
       <div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
         <div className="flex flex-row gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 lg:px-0 m-auto w-full">
           <div className="w-8 flex flex-col relative items-end">
@@ -45,52 +44,61 @@ export const PlaygroundMessage = (props: Props) => {
               )}
             </div>
           </div>
-          <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
-            {props.isBot && (
-              <span className="absolute mb-8 -top-4 left-0 text-xs text-gray-400 dark:text-gray-500">
-                {props.name}
-              </span>
-            )}
-            <div className="flex flex-grow flex-col gap-3">
+          <div className="flex w-[calc(100%-50px)] flex-col gap-3 lg:w-[calc(100%-115px)]">
+            <span className="text-xs font-bold text-gray-800 dark:text-white">
+              {props.isBot ? props.name : "You"}
+            </span>
+
+            <div className="flex flex-grow flex-col">
               <Markdown message={props.message} />
             </div>
             {/* source if aviable */}
-            {props.images && (
+            {props.images && props.images.length > 0 && (
               <div className="flex md:max-w-2xl lg:max-w-xl xl:max-w-3xl mt-4 m-auto w-full">
-                {props.images && (
-                  <div className="flex md:max-w-2xl lg:max-w-xl xl:max-w-3xl mt-4 m-auto w-full">
-                    {props.images
-                      .filter((image) => image.length > 0)
-                      .map((image, index) => (
-                        <Image
-                          key={index}
-                          src={image}
-                          alt="Uploaded Image"
-                          width={180}
-                          className="rounded-md relative"
-                        />
-                      ))}
-                  </div>
-                )}
+                {props.images
+                  .filter((image) => image.length > 0)
+                  .map((image, index) => (
+                    <Image
+                      key={index}
+                      src={image}
+                      alt="Uploaded Image"
+                      width={180}
+                      className="rounded-md relative"
+                    />
+                  ))}
               </div>
             )}
-
-            {props.isBot && (
-              <div className="flex space-x-2">
+            {props.isBot && !props.isProcessing && (
+              <div className="flex space-x-2 gap-2">
                 {!props.hideCopy && (
-                  <button
-                    onClick={() => {
-                      navigator.clipboard.writeText(props.message)
-                      setIsBtnPressed(true)
-                    }}
-                    className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
-                    {!isBtnPressed ? (
-                      <ClipboardIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
-                    ) : (
-                      <CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
-                    )}
-                  </button>
+                  <Tooltip title="Copy to clipboard">
+                    <button
+                      onClick={() => {
+                        navigator.clipboard.writeText(props.message)
+                        setIsBtnPressed(true)
+                        setTimeout(() => {
+                          setIsBtnPressed(false)
+                        }, 2000)
+                      }}
+                      className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                      {!isBtnPressed ? (
+                        <ClipboardIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                      ) : (
+                        <CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
+                      )}
+                    </button>
+                  </Tooltip>
                 )}
+
+                {/* {props.currentMessageIndex === props.totalMessages - 1 && (
+                  <Tooltip title="Regenerate">
+                    <button
+                      onClick={props.onRengerate}
+                      className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                      <ArrowPathIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                    </button>
+                  </Tooltip>
+                )} */}
               </div>
             )}
           </div>

src/components/Common/SaveButton.tsx

@@ -1,11 +1,12 @@
 import { useState } from "react"
 
 type Props = {
-  onClick: () => void
+  onClick?: () => void
   disabled?: boolean
   className?: string
   text?: string
   textOnSave?: string
+  btnType?: "button" | "submit" | "reset"
 }
 
 export const SaveButton = ({
@@ -13,11 +14,13 @@ export const SaveButton = ({
   disabled,
   className,
   text = "Save",
-  textOnSave = "Saved"
+  textOnSave = "Saved",
+  btnType = "button"
 }: Props) => {
   const [clickedSave, setClickedSave] = useState(false)
   return (
     <button
+      type={btnType}
       onClick={() => {
         setClickedSave(true)
         onClick()