Merge pull request #220 from n4ze3m/next

v1.7.4

app/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "app",
   "private": true,
-  "version": "1.7.3",
+  "version": "1.7.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

app/ui/src/components/Bot/Appearance/AppearanceBody.tsx

@@ -30,7 +30,7 @@ export const AppearanceBody = (props: Props) => {
         <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-8">
           <div className="grid grid-cols-1 gap-4 lg:col-span-2">
             <section aria-labelledby="section-1-title">
-              <div className="overflow-hidden rounded-lg bg-white border dark:bg-[#262626] dark:border-gray-700">
+              <div className="overflow-hidden rounded-lg bg-white border dark:bg-[#1e1e1e] dark:border-gray-600">
                 <div className="p-6">
                   <AppearanceForm initialData={props} form={form} />
                 </div>

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

@@ -133,7 +133,7 @@ export const DsTable = ({
               )}
               {data.length > 0 && (
                 <table className="min-w-full divide-y divide-gray-300">
-                  <thead className="bg-gray-50 dark:bg-[#141414]">
+                  <thead className="bg-gray-50 dark:bg-[#292828]">
                     <tr>
                       <th
                         scope="col"
@@ -163,7 +163,7 @@ export const DsTable = ({
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-gray-200 bg-white dark:bg-[#0a0a0a] dark:divide-gray-800">
+                  <tbody className="divide-y divide-gray-200 bg-white dark:bg-[#1e1e1e] dark:divide-gray-800">
                     {data.map((source) => (
                       <tr key={source.id}>
                         <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">

app/ui/src/components/Bot/Integration/IntegrationCard.tsx

@@ -26,14 +26,14 @@ export const IntegrationCard: React.FC<Prosp> = ({
   const { mode } = useDarkMode();
 
   return !href ? (
-    <div className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#262626] dark:border-gray-600  dark:hover:bg-[#242424]  hover:bg-gray-50">
+    <div className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#1e1e1e] dark:border-gray-600  dark:hover:bg-[#242424]  hover:bg-gray-50">
       <button onClick={onClick}>
         <div className="mb-4">
           <div className="flex items-center justify-between">
             <img className="h-12 w-auto" src={logo} alt={name} />
             <div className="ml-2 flex flex-shrink-0">
               <p
-                className={`inline-flex rounded-md px-2 text-sm  leading-5 border border-transparent uppercase tracking-widest dark:bg-[#171717] dark:text-[#fff] dark:border-gray-600  dark:hover:text-[#fff] 
+                className={`inline-flex rounded-md px-2 text-sm  leading-5 border border-transparent uppercase tracking-widest dark:bg-[#1e1e1e] dark:text-[#fff] dark:border-gray-600  dark:hover:text-[#fff] 
               `}
                 style={{
                   backgroundColor: mode !== "dark" ? color : undefined,
@@ -66,7 +66,7 @@ export const IntegrationCard: React.FC<Prosp> = ({
   ) : (
     <Link
       to={href}
-      className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#262626] dark:border-gray-600  dark:hover:bg-[#242424]  hover:bg-gray-50"
+      className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#1e1e1e] dark:border-gray-600  dark:hover:bg-[#242424]  hover:bg-gray-50"
     >
       <div>
         <div className="mb-4">

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

@@ -4,6 +4,9 @@ import { useForm } from "@mantine/form";
 import React from "react";
 import { useStoreMessage } from "../../../store";
 import { useSpeechRecognition } from "../../../hooks/useSpeechRecognition";
+import { Tooltip } from "antd";
+import { MicrophoneIcon } from "@heroicons/react/24/outline";
+import useDynamicTextareaSize from "../../../hooks/useDynamicTextareaSize";
 
 export const PlaygroundgForm = () => {
   const { onSubmit } = useMessage();
@@ -15,6 +18,7 @@ export const PlaygroundgForm = () => {
   });
 
   const client = useQueryClient();
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
   const {
     defaultSpeechToTextLanguage,
@@ -23,7 +27,6 @@ export const PlaygroundgForm = () => {
     setElevenLabsDefaultVoice,
   } = useStoreMessage();
 
-  const [hideListening, setHideListening] = React.useState(false);
   const {
     transcript,
     listening,
@@ -33,6 +36,9 @@ export const PlaygroundgForm = () => {
   } = useSpeechRecognition();
 
   React.useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef?.current?.focus();
+    }
     const defaultLanguageFromLocalStorage = localStorage.getItem(
       "defaultSpeechToTextLanguage"
     );
@@ -63,20 +69,7 @@ export const PlaygroundgForm = () => {
     form.setFieldValue("message", transcript);
   }, [transcript]);
 
-  React.useEffect(() => {
-    if (!browserSupportsSpeechRecognition) {
-      setHideListening(true);
-    } else {
-      setHideListening(false);
-    }
-  }, [browserSupportsSpeechRecognition]);
 
-  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
-  React.useEffect(() => {
-    if (textareaRef.current) {
-      textareaRef.current.focus();
-    }
-  }, []);
 
   const { mutateAsync: sendMessage, isLoading: isSending } = useMutation(
     onSubmit,
@@ -91,27 +84,22 @@ export const PlaygroundgForm = () => {
     }
   );
 
-  const resetHeight = () => {
-    const textarea = textareaRef.current;
-    if (textarea) {
-      textarea.style.height = "auto";
-    }
-  };
+  useDynamicTextareaSize(textareaRef, form.values.message, 300);
 
   return (
-    <div className="p-3 md:p-6 md:bg-white dark:bg-[#1e1e1e] border rounded-t-xl   border-black/10 dark:border-gray-600">
-      <div className="flex-grow space-y-6 ">
+    <div className="px-3 pt-3 md:px-6 md:pt-6 md:bg-white dark:bg-[#1e1e1e] border rounded-t-xl   border-black/10 dark:border-gray-600">
+      <div>
         <div className="flex">
           <form
             onSubmit={form.onSubmit(async (value) => {
               form.reset();
-              resetHeight();
               await sendMessage(value.message);
             })}
-            className="shrink-0 flex-grow  flex items-center "
+            className="shrink-0 flex-grow  flex flex-col items-center "
           >
-            <div className="flex items-center p-2 rounded-xl border  bg-gray-100 w-full dark:bg-[#1e1e1e] dark:border-gray-600">
+            <div className="w-full border-x border-t flex flex-col dark:border-gray-600 rounded-t-xl p-2">
               <textarea
+                ref={textareaRef}
                 onKeyDown={(e) => {
                   if (e.key === "Enter" && !e.shiftKey && !isSending) {
                     e.preventDefault();
@@ -120,38 +108,48 @@ export const PlaygroundgForm = () => {
                         return;
                       }
                       form.reset();
-                      resetHeight();
                       await sendMessage(value.message);
                     })();
                   }
                 }}
-                ref={textareaRef}
-                className="rounded-full pl-4 pr-2 py-2 w-full resize-none bg-transparent focus-within:outline-none sm:text-sm focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
+                className="px-2 py-2 w-full resize-none bg-transparent focus-within:outline-none  focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
                 required
                 rows={1}
+                style={{ minHeight: "60px" }}
                 tabIndex={0}
-                placeholder={
-                  !listening ? "Type your message…" : "Listening......"
-                }
+                placeholder="Type a message..."
                 {...form.getInputProps("message")}
               />
-              {!hideListening && (
+              <div className="flex mt-4 justify-end gap-3">
+                <Tooltip title="Voice Message">
+                  <button
+                    hidden={!browserSupportsSpeechRecognition}
+                    type="button"
+                    onClick={() => {
+                      if (!listening) {
+                        listen({
+                          lang: defaultSpeechToTextLanguage,
+                        });
+                      } else {
+                        stop();
+                      }
+                    }}
+                    className={`flex items-center justify-center dark:text-gray-300`}
+                  >
+                    {!listening ? (
+                      <MicrophoneIcon className="h-5 w-5" />
+                    ) : (
+                      <div className="relative">
+                        <span className="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"></span>
+                        <MicrophoneIcon className="h-5 w-5" />
+                      </div>
+                    )}
+                  </button>
+                </Tooltip>
+
                 <button
-                  disabled={isSending}
-                  onClick={() => {
-                    if (!listening) {
-                      listen({
-                        lang: defaultSpeechToTextLanguage,
-                      });
-                    } else {
-                      stop();
-                    }
-                  }}
-                  type="button"
-                  className={`p-0 mr-2 text-gray-500  ${
-                    listening &&
-                    "animate-pulse ring-2 ring-blue-500 rounded-full ring-opacity-50"
-                  }`}
+                  disabled={isSending || form.values.message.length === 0}
+                  className="inline-flex items-center rounded-md border border-transparent bg-black px-2 py-2  font-medium leading-4 text-white shadow-sm hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50 "
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -160,41 +158,18 @@ export const PlaygroundgForm = () => {
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth="2"
-                    className="h-6 w-6"
+                    className="h-4 w-4 mr-2"
                     viewBox="0 0 24 24"
                   >
-                    <path d="M12 2a3 3 0 00-3 3v7a3 3 0 006 0V5a3 3 0 00-3-3z"></path>
-                    <path d="M19 10v2a7 7 0 01-14 0v-2"></path>
-                    <path d="M12 19L12 22"></path>
+                    <path d="M9 10L4 15 9 20"></path>
+                    <path d="M20 4v7a4 4 0 01-4 4H4"></path>
                   </svg>
+                  Send
                 </button>
-              )}
-              <button
-                disabled={isSending || form.values.message.length === 0}
-                className="mx-2  flex items-center justify-center w-10 h-10  text-white bg-black rounded-xl disabled:opacity-50"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  className="h-6 w-6"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M9 10L4 15 9 20"></path>
-                  <path d="M20 4v7a4 4 0 01-4 4H4"></path>
-                </svg>
-              </button>
+              </div>
             </div>
           </form>
         </div>
-        {/* <div className="text-center text-xs text-gray-500 dark:text-gray-400">
-          <span className="inline-block">
-            {"LLM can make mistakes, please verify the answer always."}
-          </span>
-        </div> */}
       </div>
     </div>
   );

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

@@ -81,9 +81,9 @@ export const PlaygroundHistoryCard = ({
       className={`flex py-2 px-2 items-center gap-3 relative rounded-md truncate hover:pr-4 group transition-opacity duration-300 ease-in-out ${
         historyId === item.id
           ? item.id === params.history_id
-            ? "bg-gray-300 dark:bg-[#262626] dark:text-white"
-            : "bg-gray-300 dark:bg-[#262626] dark:text-white"
-          : "bg-gray-100 dark:bg-[#0a0a0a] dark:text-gray-200"
+            ? "bg-gray-300 dark:bg-[#393939] dark:text-white"
+            : "bg-gray-300 dark:bg-[#393939] dark:text-white"
+          : "bg-gray-100 dark:bg-[#201f1f] dark:text-gray-200"
       }`}
     >
       <Link

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

@@ -23,14 +23,6 @@ type Props = Message & {
 export const PlaygroundMessage = (props: Props) => {
   const [isBtnPressed, setIsBtnPressed] = React.useState(false);
 
-  React.useEffect(() => {
-    if (isBtnPressed) {
-      setTimeout(() => {
-        setIsBtnPressed(false);
-      }, 4000);
-    }
-  }, [isBtnPressed]);
-
   const { speak, cancel, speaking: isWebSpeaking } = useSpeechSynthesis();
   const {
     speak: speakElevenLabs,
@@ -40,9 +32,7 @@ export const PlaygroundMessage = (props: Props) => {
   } = useElevenLabsTTS();
 
   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">
@@ -93,13 +83,16 @@ export const PlaygroundMessage = (props: Props) => {
                   onClick={() => {
                     navigator.clipboard.writeText(props.message);
                     setIsBtnPressed(true);
+                    setTimeout(() => {
+                      setIsBtnPressed(false);
+                    }, 4000);
                   }}
-                  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"
+                  className="flex items-center justify-center w-8 h-8 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" />
+                    <ClipboardIcon className="w-4 h-4 text-gray-400 group-hover:text-gray-500" />
                   ) : (
-                    <CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
+                    <CheckIcon className="w-4 h-4 text-green-400 group-hover:text-green-500" />
                   )}
                 </button>
               )}

app/ui/src/components/Bot/Settings/SettingsCard.tsx

@@ -135,7 +135,7 @@ export const SettingsCard: React.FC<BotSettings> = ({
           layout="vertical"
           className="space-y-6 mb-6 "
         >
-          <div className="px-4 py-5 bg-white  border sm:rounded-lg sm:p-6 dark:bg-[#262626] dark:border-gray-700">
+          <div className="px-4 py-5 bg-white  border sm:rounded-lg sm:p-6 dark:bg-[#1e1e1e] dark:border-gray-700">
             <div className="md:grid md:grid-cols-3 md:gap-6">
               <div className="md:col-span-1">
                 <h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-white">
@@ -325,7 +325,7 @@ export const SettingsCard: React.FC<BotSettings> = ({
           </div>
         </Form>
 
-        <div className="bg-white border sm:rounded-lg dark:bg-[#262626] dark:border-gray-700">
+        <div className="bg-white border sm:rounded-lg dark:bg-[#1e1e1e] dark:border-gray-700">
           <div className="px-4 py-5 sm:p-6">
             <h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-white">
               Delete your bot

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

@@ -30,7 +30,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={{
@@ -90,9 +90,9 @@ export default function Markdown({ message }: { message: string }) {
                     lineHeight: "1.5rem",
                   }}
                   language={(match && match[1]) || ""}
-                  codeTagProps={{
-                    className: "text-sm",
-                  }}
+                  // codeTagProps={{
+                  //   className: "text-sm",
+                  // }}
                 />
               </div>
             ) : (
@@ -106,7 +106,7 @@ export default function Markdown({ message }: { message: string }) {
               <a
                 target="_blank"
                 rel="noreferrer"
-                className="text-blue-500 text-sm hover:underline"
+                className="text-blue-500  hover:underline"
                 {...props}
               >
                 {props.children}