From a2f9002b8115176fa1dfca28ffbf485278cc4ac2 Mon Sep 17 00:00:00 2001
From: n4ze3m <n4ze3m@gmail.com>
Date: Sun, 20 Oct 2024 17:45:56 +0530
Subject: [PATCH] feat: enhance playground UI

Refine the Playground's UI to improve user experience:

- Streamline chat window layout for better message readability
- Introduce a knowledge selection dropdown for easier context setting
- Improve image upload integration for a smoother workflow
- Optimize spacing and styling for a more polished visual appearance
---
 src/components/Common/CodeBlock.tsx           |  6 ++-
 src/components/Common/Playground/Message.tsx  |  4 +-
 src/components/Icons/Fireworks.tsx            |  2 +-
 .../Option/Playground/PlaygroundChat.tsx      |  6 +--
 .../Option/Playground/PlaygroundForm.tsx      | 39 ++++++++++---------
 5 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/components/Common/CodeBlock.tsx b/src/components/Common/CodeBlock.tsx
index d48a699..9fd759d 100644
--- a/src/components/Common/CodeBlock.tsx
+++ b/src/components/Common/CodeBlock.tsx
@@ -90,7 +90,11 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
           width="80%"
           zIndex={999999}
           centered
-          bodyStyle={{ padding: 0 }}>
+          styles={{
+            body: {
+              padding: 0
+            }
+          }}>
           <div className="relative  w-full h-[80vh]">
             <iframe
               srcDoc={value}
diff --git a/src/components/Common/Playground/Message.tsx b/src/components/Common/Playground/Message.tsx
index c2d4290..9d664a1 100644
--- a/src/components/Common/Playground/Message.tsx
+++ b/src/components/Common/Playground/Message.tsx
@@ -48,8 +48,8 @@ export const PlaygroundMessage = (props: Props) => {
 
   return (
     <div className="group w-full text-gray-800 dark:text-gray-100">
-      <div className="text-base  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="text-base 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 p-4 md:py-6 lg:px-0 m-auto w-full">
           <div className="w-8 flex flex-col relative items-end">
             <div className="relative h-7 w-7 p-1 rounded-sm text-white flex items-center justify-center  text-opacity-100r">
               {props.isBot ? (
diff --git a/src/components/Icons/Fireworks.tsx b/src/components/Icons/Fireworks.tsx
index 95ed708..2940bea 100644
--- a/src/components/Icons/Fireworks.tsx
+++ b/src/components/Icons/Fireworks.tsx
@@ -12,7 +12,7 @@ export const FireworksMonoIcon = React.forwardRef<
       ref={ref}
       {...props}>
       <path
-        fill="#fff"
+        fill="#6720FF"
         d="M318.563 221.755c-17.7 0-33.584-10.508-40.357-26.777L196.549 0h47.793l74.5 178.361L393.273 0h47.793L358.92 195.048c-6.808 16.199-22.657 26.707-40.357 26.707zM425.111 314.933c-17.63 0-33.444-10.439-40.287-26.567-6.877-16.269-3.317-34.842 9.112-47.445l148.721-150.64 18.572 43.813-136.153 137.654 194.071-1.082 18.573 43.813-212.574.524-.07-.07h.035zM0 314.408l18.573-43.813 194.07 1.082L76.525 133.988l18.573-43.813 148.721 150.641c12.428 12.568 16.024 31.21 9.111 47.444-6.842 16.164-22.727 26.567-40.287 26.567L.07 314.339l-.07.069z"></path>
     </svg>
   )
diff --git a/src/components/Option/Playground/PlaygroundChat.tsx b/src/components/Option/Playground/PlaygroundChat.tsx
index 5d980f9..0049fba 100644
--- a/src/components/Option/Playground/PlaygroundChat.tsx
+++ b/src/components/Option/Playground/PlaygroundChat.tsx
@@ -27,7 +27,7 @@ export const PlaygroundChat = () => {
     <>
       <div
         ref={containerRef}
-        className="custom-scrollbar grow flex flex-col md:translate-x-0 transition-transform duration-300 ease-in-out overflow-y-auto h-[calc(100vh-200px)]">
+        className="custom-scrollbar grow flex flex-col md:translate-x-0 transition-transform duration-300 ease-in-out overflow-y-auto h-[calc(100vh-160px)]">
         {messages.length === 0 && (
           <div className="mt-32">
             <PlaygroundEmpty />
@@ -61,10 +61,10 @@ export const PlaygroundChat = () => {
         )}
       </div>
       {!isAtBottom && (
-        <div className="fixed md:bottom-44 bottom-36 z-[99999] left-0 right-0 flex justify-center">
+        <div className="fixed md:bottom-40 bottom-36 z-20 left-0 right-0 flex justify-center">
           <button
             onClick={scrollToBottom}
-            className="bg-gray-100 dark:bg-gray-800 p-1 rounded-full shadow-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
+            className="bg-gray-100 border dark:border-gray-700 dark:bg-gray-800 p-1 rounded-full shadow-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
             <ChevronDown className="size-4 text-gray-600 dark:text-gray-300" />
           </button>
         </div>
diff --git a/src/components/Option/Playground/PlaygroundForm.tsx b/src/components/Option/Playground/PlaygroundForm.tsx
index cb2029a..be312e2 100644
--- a/src/components/Option/Playground/PlaygroundForm.tsx
+++ b/src/components/Option/Playground/PlaygroundForm.tsx
@@ -190,7 +190,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
   }
 
   return (
-    <div className="px-3 pt-3 md:px-6 md:pt-6 bg-gray-50 dark:bg-[#262626] border rounded-t-xl  dark:border-gray-600">
+    <div className="px-3 pt-3 md:px-4 md:pt-4 bg-gray-100 dark:bg-[#262626] border rounded-t-xl  dark:border-gray-600">
       <div
         className={`h-full rounded-md shadow relative ${
           form.values.image.length === 0 ? "hidden" : "block"
@@ -213,7 +213,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
         </div>
       </div>
       <div>
-        <div className="flex bg-white dark:bg-transparent">
+        <div className="flex rounded-t-xl bg-white dark:bg-transparent">
           <form
             onSubmit={form.onSubmit(async (value) => {
               stopListening()
@@ -264,7 +264,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
                 required
                 onPaste={handlePaste}
                 rows={1}
-                style={{ minHeight: "60px" }}
+                style={{ minHeight: "40px" }}
                 tabIndex={0}
                 placeholder={t("form.textarea.placeholder")}
                 {...form.getInputProps("message")}
@@ -286,7 +286,23 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
                   )}
                 </div>
                 <div className="flex !justify-end gap-3">
-                  <KnowledgeSelect />
+                  
+
+                  {!selectedKnowledge && (
+                    <Tooltip title={t("tooltip.uploadImage")}>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          inputRef.current?.click()
+                        }}
+                        className={`flex items-center justify-center dark:text-gray-300 ${
+                          chatMode === "rag" ? "hidden" : "block"
+                        }`}>
+                        <ImageIcon className="h-5 w-5" />
+                      </button>
+                    </Tooltip>
+                  )}
+
                   {browserSupportsSpeechRecognition && (
                     <Tooltip title={t("tooltip.speechToText")}>
                       <button
@@ -314,21 +330,8 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
                       </button>
                     </Tooltip>
                   )}
+                  <KnowledgeSelect />
 
-                  {!selectedKnowledge && (
-                    <Tooltip title={t("tooltip.uploadImage")}>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          inputRef.current?.click()
-                        }}
-                        className={`flex items-center justify-center dark:text-gray-300 ${
-                          chatMode === "rag" ? "hidden" : "block"
-                        }`}>
-                        <ImageIcon className="h-5 w-5" />
-                      </button>
-                    </Tooltip>
-                  )}
                   {!isSending ? (
                     <Dropdown.Button
                       htmlType="submit"