Merge pull request #150 from n4ze3m/next

1.4.2

.github/workflows/build.yml

@@ -27,5 +27,6 @@ jobs:
             n4z3m/dialoqbase:latest
             n4z3m/dialoqbase:${{ github.ref_name}}
           push: true
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
+          platforms: linux/amd64,linux/arm64
+          cache-from: type=registry,ref=n4z3m/dialoqbase:latest
+          cache-to: type=inline

.github/workflows/next.yml

@@ -25,5 +25,6 @@ jobs:
           tags: |
             n4z3m/dialoqbase-next:latest
           push: true
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
+          platforms: linux/amd64,linux/arm64
+          cache-from: type=registry,ref=n4z3m/dialoqbase-next:latest
+          cache-to: type=inline

Dockerfile

@@ -2,11 +2,14 @@ FROM node:18-slim as server
 
 WORKDIR /app
 
-RUN apt update
+RUN apt update && apt -y install g++ make python3
+RUN npm install -g node-gyp
 
 COPY ./server/ .
 
-RUN yarn install --network-timeout 10000000
+RUN yarn config set registry https://registry.npmjs.org/
+RUN yarn config set network-timeout 1200000
+RUN yarn install --frozen-lockfile
 
 RUN yarn build
 
@@ -24,7 +27,12 @@ RUN pnpm build
 FROM node:18-slim
 WORKDIR /app
 
+RUN yarn config set registry https://registry.npmjs.org/
+RUN yarn config set network-timeout 1200000
+
 RUN apt update && apt -y install --no-install-recommends ca-certificates git git-lfs openssh-client curl jq cmake sqlite3 openssl psmisc python3
+RUN apt -y install g++ make
+RUN npm install -g node-gyp
 RUN apt-get clean autoclean && apt-get autoremove --yes && rm -rf /var/lib/{apt,dpkg,cache,log}/
 RUN npm --no-update-notifier --no-fund --global install pnpm
 # Copy API
@@ -39,7 +47,7 @@ COPY --from=build /app/app/widget/dist/index.html ./public/bot.html
 # Copy script
 COPY --from=build /app/app/script/dist/chat.min.js ./public/chat.min.js
 
-RUN yarn install --production --network-timeout 10000000
+RUN yarn install --production  --frozen-lockfile
 
 ENV NODE_ENV=production
 

app/ui/package.json

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

app/ui/src/Layout/BotPlaygroundLayout.tsx

@@ -297,6 +297,7 @@ export default function BotPlaygroundLayout({
             </div>
           </div>
           {children}
+
         </div>
       </div>
     </>

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

@@ -73,15 +73,8 @@ export const PlaygroundgForm = () => {
 
   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);
+    if (textareaRef.current) {
+      textareaRef.current.focus();
     }
   }, []);
 
@@ -106,8 +99,8 @@ export const PlaygroundgForm = () => {
   };
 
   return (
-    <div className="p-3 ">
-      <div className="flex-grow space-y-6">
+    <div className="p-3 md:p-6 md:bg-white md:border md:rounded-t-xl">
+      <div className="flex-grow space-y-6 ">
         <div className="flex">
           <form
             onSubmit={form.onSubmit(async (value) => {
@@ -117,34 +110,34 @@ export const PlaygroundgForm = () => {
             })}
             className="shrink-0 flex-grow  flex items-center "
           >
-            <div className="flex flex-col w-full py-2 flex-grow md:py-3 md:pl-4 relative border border-black/10 bg-white dark:border-gray-900/50 dark:text-white dark:bg-gray-700 rounded-md shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]">
+            <div className="relative flex max-h-40 w-full grow flex-col overflow-hidden bg-background px-8 rounded-md border sm:px-12 items-center">
               <textarea
-                // style={{ height: "48px !important" }}
-                disabled={isSending}
+                // disabled={isSendinhg}
                 onKeyDown={(e) => {
-                  if (e.key === "Enter" && !e.shiftKey) {
+                  if (e.key === "Enter" && !e.shiftKey && !isSending) {
                     e.preventDefault();
                     form.onSubmit(async (value) => {
                       form.reset();
                       resetHeight();
                       await sendMessage(value.message);
-                      // reset the height of the textarea
                     })();
                   }
                 }}
                 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 ${
+                className={`min-h-[40px] w-full resize-none border-0 bg-transparent  py-[1rem] m-0 focus:ring-0 focus-visible:ring-0 dark:bg-transparent pr-2 md:pr-0 ${
                   listening && "placeholder:italic"
                 }`}
+                // className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm focus:ring-0 focus-visible:ring-0 dark:bg-transparent "
                 required
+                rows={1}
+                tabIndex={0}
                 placeholder={
                   !listening ? "Type your message…" : "Listening......"
                 }
                 {...form.getInputProps("message")}
               />
               {!hideListening && (
-                <div className="absolute flex items-center bottom-0.5 right-0.5">
+                <div className="absolute right-0 top-4 sm:right-4">
                   <button
                     disabled={isSending}
                     onClick={() => {
@@ -157,47 +150,45 @@ export const PlaygroundgForm = () => {
                       }
                     }}
                     type="button"
-                    className={`absolute p-1 rounded-md bottom-1.5 md:bottom-2 bg-transparent disabled:bg-gray-500 right-1 md:right-2 disabled:opacity-40 ${
-                      // add mic animation with rings when listening
+                    className={`p-0 mr-2 text-gray-500  ${
                       listening &&
                       "animate-pulse ring-2 ring-blue-500 rounded-full ring-opacity-50"
                     }`}
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       fill="none"
-                      viewBox="0 0 24 24"
-                      strokeWidth={1.5}
                       stroke="currentColor"
-                      className="h-6 w-6 m-1 md:m-0"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      className="h-6 w-6"
+                      viewBox="0 0 24 24"
                     >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"
-                      />
+                      <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>
                     </svg>
                   </button>
                 </div>
               )}
             </div>
             <button
               disabled={isSending}
-              className="p-1 ml-3 rounded-md  bg-transparent disabled:bg-gray-500  disabled:opacity-40"
+              className="ml-6 rounded-md  bg-black  p-3 text-white disabled:opacity-40"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
                 stroke="currentColor"
-                className="h-6 w-6 m-1 md:m-0"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="h-4 w-4"
+                viewBox="0 0 24 24"
               >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
-                />
+                <path d="M9 10L4 15 9 20"></path>
+                <path d="M20 4v7a4 4 0 01-4 4H4"></path>
               </svg>
             </button>
           </form>

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

@@ -22,8 +22,8 @@ export const PlaygroundBody = () => {
             <PlaygroundChat />
           </div>
           <div className="md:ml-[100px]">
-            <div className=" bottom-0 w-full fixed border-t md:border-t-0 dark:border-white/20 md:border-transparent md:dark:border-transparent md:bg-vert-light-gradient bg-white dark:bg-gray-800 md:!bg-transparent dark:md:bg-vert-dark-gradient pt-2">
-              <div className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-2xl xl:max-w-3xl">
+            <div className="bottom-0 w-full md:!bg-transparent md:!border-0 fixed border-t bg-white pt-2">
+              <div className="stretch mx-2 flex flex-row gap-3 md:mx-4 lg:mx-auto lg:max-w-2xl xl:max-w-3xl">
                 <div className="relative flex flex-col h-full flex-1 items-stretch md:flex-col">
                   <PlaygroundgForm />
                 </div>

app/ui/src/store/index.tsx

@@ -61,7 +61,7 @@ export const useStoreMessage = create<State>((set) => ({
   setMessages: (messages) => set({ messages }),
   history: [],
   setHistory: (history) => set({ history }),
-  streaming: false,
+  streaming: true,
   setStreaming: (streaming) => set({ streaming }),
   isFirstMessage: true,
   setIsFirstMessage: (isFirstMessage) => set({ isFirstMessage }),

app/widget/src/components/BotForm.tsx

@@ -23,13 +23,6 @@ export default function BotForm({
       onSuccess: () => {
         form.setFieldValue("message", "");
       },
-      onError: (error) => {
-        console.error(error);
-        // setMessages([
-        //   ...messages,
-        //   { isBot: true, message: "Unable to send message" },
-        // ]);
-      },
     }
   );
   return (

app/widget/src/hooks/useMessage.tsx

@@ -156,6 +156,9 @@ export const useMessage = () => {
   };
 
   const onSubmit = async (message: string) => {
+    if (message.trim().length === 0) {
+      return;
+    }
     if (streaming) {
       await streamingRequest(message);
     } else {

app/widget/src/store/index.tsx

@@ -25,7 +25,7 @@ export const useStoreMessage = create<State>((set) => ({
   setMessages: (messages) => set({ messages }),
   history: [],
   setHistory: (history) => set({ history }),
-  streaming: false,
+  streaming: true,
   setStreaming: (streaming) => set({ streaming }),
 }));
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dialoqbase",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Create chatbots with ease",
   "scripts": {
     "ui:dev": "pnpm run --filter ui dev",

server/src/routes/api/v1/bot/playground/handlers/chat.handler.ts

@@ -6,8 +6,10 @@ import { chatModelProvider } from "../../../../../../utils/models";
 import { DialoqbaseHybridRetrival } from "../../../../../../utils/hybrid";
 import { BaseRetriever } from "langchain/schema/retriever";
 import { Document } from "langchain/document";
-import { createChain, groupMessagesByConversation } from "../../../../../../chain";
-
+import {
+  createChain,
+  groupMessagesByConversation,
+} from "../../../../../../chain";
 
 export const chatRequestHandler = async (
   request: FastifyRequest<ChatRequestBody>,
@@ -140,10 +142,12 @@ export const chatRequestHandler = async (
 
     const botResponse = await chain.invoke({
       question: sanitizedQuestion,
-      chat_history: groupMessagesByConversation(history.map((message) => ({
-        type: message.type,
-        content: message.text,
-      })),)
+      chat_history: groupMessagesByConversation(
+        history.map((message) => ({
+          type: message.type,
+          content: message.text,
+        }))
+      ),
     });
 
     const documents = await documentPromise;
@@ -230,10 +234,6 @@ export const chatRequestStreamHandler = async (
   const bot_id = request.params.id;
 
   const { message, history, history_id } = request.body;
-  // const history = JSON.parse(chatHistory) as {
-  //   type: string;
-  //   text: string;
-  // }[];
   try {
     const prisma = request.server.prisma;
 
@@ -351,27 +351,13 @@ export const chatRequestStreamHandler = async (
       }
     }
 
-    let response: any = null;
+    let response: string = "";
     const streamedModel = chatModelProvider(
       bot.provider,
       bot.model,
       temperature,
       {
         streaming: true,
-        callbacks: [
-          {
-            handleLLMNewToken(token: string) {
-              return reply.sse({
-                id: "",
-                event: "chunk",
-                data: JSON.stringify({
-                  message: token || "",
-                }),
-              });
-
-            },
-          },
-        ],
         ...botConfig,
       }
     );
@@ -397,7 +383,7 @@ export const chatRequestStreamHandler = async (
       retriever,
     });
 
-    response = await chain.invoke({
+    let stream = await chain.stream({
       question: sanitizedQuestion,
       chat_history: groupMessagesByConversation(
         history.map((message) => ({
@@ -407,6 +393,17 @@ export const chatRequestStreamHandler = async (
       ),
     });
 
+    for await (const token of stream) {
+      reply.sse({
+        id: "",
+        event: "chunk",
+        data: JSON.stringify({
+          message: token || "",
+        }),
+      });
+      response += token;
+    }
+
     let historyId = history_id;
     const documents = await documentPromise;