Merge pull request #228 from n4ze3m/next

v175

app/ui/package.json

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

app/ui/src/Layout/BotLayout.tsx

@@ -183,42 +183,7 @@ export default function BotLayout({
           </Dialog>
         </Transition.Root>
 
-        <div className="hidden md:fixed md:inset-y-0 md:flex md:flex-col">
-          <div className="flex flex-grow flex-col overflow-y-auto border-r border-gray-200 bg-white pt-5 dark:bg-[#171717] dark:border-gray-600">
-            <div className="mt-14 flex flex-grow flex-col">
-              <nav className="flex-1 space-y-1 px-2 pb-4">
-                {navigation.map((item) => (
-                  <Tooltip placement="right" key={item.name} title={item.name}>
-                    <Link
-                      to={{
-                        pathname: item.href.replace(":id", params.id!),
-                      }}
-                      className={classNames(
-                        location.pathname ===
-                          item.href.replace(":id", params.id!)
-                          ? "bg-gray-100 text-gray-900 dark:bg-[#262626] dark:text-white"
-                          : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white dark:hover:bg-[#262626]",
-                        "group  flex items-center px-2 py-2 text-sm font-medium rounded-md"
-                      )}
-                    >
-                      <item.icon
-                        className={classNames(
-                          location.pathname ===
-                            item.href.replace(":id", params.id!)
-                            ? "text-gray-500 dark:text-white"
-                            : "text-gray-400 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-white",
-                          "flex-shrink-0 h-6 w-6"
-                        )}
-                        aria-hidden="true"
-                      />
-                      {/* {item.name} */}
-                    </Link>
-                  </Tooltip>
-                ))}
-              </nav>
-            </div>
-          </div>
-        </div>
+
 
         <div className="flex flex-col">
           <div className="sticky top-0 z-[999] flex h-14  bg-white border-b border-gray-200 dark:bg-[#171717] dark:border-gray-600">
@@ -255,6 +220,43 @@ export default function BotLayout({
                 </div> */}
           </main>
         </div>
+
+        <div className="hidden md:fixed md:inset-y-0 md:flex md:flex-col ">
+          <div className="flex flex-grow flex-col overflow-y-auto border-r border-gray-200 bg-white pt-5 dark:bg-[#171717] dark:border-gray-600">
+            <div className="mt-14 flex flex-grow flex-col">
+              <nav className="flex-1 space-y-1 px-2 pb-4">
+                {navigation.map((item) => (
+                  <Tooltip placement="right" key={item.name} title={item.name}>
+                    <Link
+                      to={{
+                        pathname: item.href.replace(":id", params.id!),
+                      }}
+                      className={classNames(
+                        location.pathname ===
+                          item.href.replace(":id", params.id!)
+                          ? "bg-gray-100 text-gray-900 dark:bg-[#262626] dark:text-white"
+                          : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white dark:hover:bg-[#262626]",
+                        "group  flex items-center px-2 py-2 text-sm font-medium rounded-md"
+                      )}
+                    >
+                      <item.icon
+                        className={classNames(
+                          location.pathname ===
+                            item.href.replace(":id", params.id!)
+                            ? "text-gray-500 dark:text-white"
+                            : "text-gray-400 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-white",
+                          "flex-shrink-0 h-6 w-6"
+                        )}
+                        aria-hidden="true"
+                      />
+                      {/* {item.name} */}
+                    </Link>
+                  </Tooltip>
+                ))}
+              </nav>
+            </div>
+          </div>
+        </div>
       </div>
     </>
   );

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

@@ -1,7 +1,7 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useMessage } from "../../../hooks/useMessage";
 import { useForm } from "@mantine/form";
-import React from "react";
+import React, { useState } from "react";
 import { useStoreMessage } from "../../../store";
 import { useSpeechRecognition } from "../../../hooks/useSpeechRecognition";
 import { Tooltip } from "antd";
@@ -19,6 +19,7 @@ export const PlaygroundgForm = () => {
 
   const client = useQueryClient();
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+  const [typing, setTyping] = useState<boolean>(false);
 
   const {
     defaultSpeechToTextLanguage,
@@ -69,8 +70,6 @@ export const PlaygroundgForm = () => {
     form.setFieldValue("message", transcript);
   }, [transcript]);
 
-
-
   const { mutateAsync: sendMessage, isLoading: isSending } = useMutation(
     onSubmit,
     {
@@ -101,7 +100,12 @@ export const PlaygroundgForm = () => {
               <textarea
                 ref={textareaRef}
                 onKeyDown={(e) => {
-                  if (e.key === "Enter" && !e.shiftKey && !isSending) {
+                  if (
+                    !typing &&
+                    e.key === "Enter" &&
+                    !e.shiftKey &&
+                    !isSending
+                  ) {
                     e.preventDefault();
                     form.onSubmit(async (value) => {
                       if (value.message.trim().length === 0) {
@@ -118,6 +122,8 @@ export const PlaygroundgForm = () => {
                 style={{ minHeight: "60px" }}
                 tabIndex={0}
                 placeholder="Type a message..."
+                onCompositionStart={() => setTyping(true)}
+                onCompositionEnd={() => setTyping(false)}
                 {...form.getInputProps("message")}
               />
               <div className="flex mt-4 justify-end gap-3">

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

@@ -7,25 +7,25 @@ import { Skeleton } from "antd";
 export const PlaygroundBody = () => {
   const { isLoading } = useMessage();
   return (
-    <div className="relative md:ml-14">
+    <div className=" md:ml-14">
       <div className="flex flex-col">
         {" "}
-        <div className="hidden md:block">
+        <div className="hidden  lg:block">
           <PlaygroundMenu />
         </div>
-        <div className="flex-grow md:pl-[100px]">
+        <div className="flex-grow  flex-1">
           {isLoading ? (
             <div className="flex p-12 items-center justify-center h-full">
               <Skeleton active paragraph={{ rows: 10 }} />
             </div>
           ) : (
             <div>
-              <div className="md:ml-[150px]">
+              <div>
                 <PlaygroundChat />
               </div>
               <div>
                 <div className="bottom-0 w-full bg-transparent border-0 fixed 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="stretch mx-2 flex flex-row gap-3 lg:mx-auto lg:max-w-2xl xl:max-w-3xl md:max-w-3xl md:mx-auto">
                     <div className="relative flex flex-col h-full flex-1 items-stretch md:flex-col">
                       <PlaygroundgForm />
                     </div>

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

@@ -55,6 +55,10 @@ export const SettingsCard: React.FC<BotSettings> = ({
     return response.data;
   };
 
+  const onCopy = async () => {
+    const response = await api.post(`/bot/${params.id}/copy`);
+    return response.data;
+  };
   const { mutate: deleteBot, isLoading: isDeleting } = useMutation(onDelete, {
     onSuccess: () => {
       client.invalidateQueries(["getAllBots"]);
@@ -80,6 +84,29 @@ export const SettingsCard: React.FC<BotSettings> = ({
     },
   });
 
+  const { mutate: copyBot, isLoading: isCopying } = useMutation(onCopy, {
+    onSuccess: (data) => {
+      client.invalidateQueries(["getAllBots"]);
+      navigate(`/bot/${data.id}`);
+      notification.success({
+        message: "Bot copied successfully",
+      });
+    },
+    onError: (error: any) => {
+      if (axios.isAxiosError(error)) {
+        const message = error.response?.data?.message || "Something went wrong";
+        notification.error({
+          message,
+        });
+        return;
+      }
+
+      notification.error({
+        message: "Something went wrong",
+      });
+    },
+  });
+
   const currentModel = Form.useWatch("model", form);
 
   const isStreamingSupported = (model: string) => {
@@ -113,7 +140,7 @@ export const SettingsCard: React.FC<BotSettings> = ({
         </div>
       </div>
       {/* centerize the div */}
-      <div className="mt-6 space-y-3">
+      <div className="mt-6 space-y-4">
         <Form
           initialValues={{
             name: data.name,
@@ -325,6 +352,37 @@ export const SettingsCard: React.FC<BotSettings> = ({
           </div>
         </Form>
 
+        <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">
+              Make a copy of your bot
+            </h3>
+            <div className="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
+              <p>
+                This action will create a new bot with the same settings as this
+                bot, except for the Integration settings that need to be
+                reconfigured{" "}
+              </p>
+            </div>
+            <div className="mt-5">
+              <button
+                type="button"
+                onClick={() => {
+                  const confirm = window.confirm(
+                    "Are you sure you want to make a copy of this bot?"
+                  );
+                  if (confirm) {
+                    copyBot();
+                  }
+                }}
+                className="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:text-sm"
+              >
+                {isCopying ? "Copying..." : "Make a copy"}
+              </button>
+            </div>
+          </div>
+        </div>
+
         <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">

app/ui/src/routes/bot/integrations.tsx

@@ -52,7 +52,7 @@ export default function BotIntegrationRoot() {
   }, [status]);
 
   return (
-    <div className="mx-auto my-3 w-full max-w-7xl">
+    <div className="mx-auto my-3  w-full max-w-7xl">
       {status === "loading" && <SkeletonLoading className="mt-6" />}
       {status === "success" && <IntegrationGrid data={data.data} />}
     </div>

app/widget/src/components/BotForm.tsx

@@ -2,9 +2,11 @@ import { useMutation } from "@tanstack/react-query";
 import { useMessage } from "../hooks/useMessage";
 import { useForm } from "@mantine/form";
 import { BotStyle } from "../utils/types";
+import { useState } from "react";
 
 export default function BotForm({}: { botStyle: BotStyle }) {
   const { onSubmit } = useMessage();
+  const [typing, setTyping] = useState<boolean>(false);
 
   const form = useForm({
     initialValues: {
@@ -34,8 +36,15 @@ export default function BotForm({}: { botStyle: BotStyle }) {
           >
             <div className="flex items-cente rounded-full border  bg-gray-100 w-full dark:bg-[#171717] dark:border-gray-600">
               <textarea
+                onCompositionStart={() => setTyping(true)}
+                onCompositionEnd={() => setTyping(false)}
                 onKeyDown={(e) => {
-                  if (e.key === "Enter" && !e.shiftKey && !isSending) {
+                  if (
+                    !typing &&
+                    e.key === "Enter" &&
+                    !e.shiftKey &&
+                    !isSending
+                  ) {
                     e.preventDefault();
                     form.onSubmit(async (value) => {
                       form.reset();

docs/guide/running-locally-for-development.md

@@ -95,4 +95,4 @@ Set the `DATABASE_URL` environment variable to the URL of your PostgreSQL databa
     - If you don't have `pnpm` installed, you can install it globally with `npm install -g pnpm` 
     - If you don't have `yarn` installed, you can install Yarn globally with `npm install -g yarn`
 
-Now you should be able to access the frontend at `localhost:5173` and the backend API at `localhost:3000`. As you make code changes, the servers will reload and reflect the updates. But if you make changes to the widget, you will need to run the asset copy command again to update the widget assets in the backend.
+Now you should be able to access the frontend at `localhost:5123` and the backend API at `localhost:3000`. As you make code changes, the servers will reload and reflect the updates. But if you make changes to the widget, you will need to run the asset copy command again to update the widget assets in the backend.

package.json

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

server/prisma/migrations/q_19/migration.sql

@@ -0,0 +1,11 @@
+-- CreateTable
+CREATE TABLE "BotApiHistory" (
+    "id" SERIAL NOT NULL,
+    "api_key" TEXT NOT NULL,
+    "bot_id" TEXT,
+    "human" TEXT,
+    "bot" TEXT,
+    "createdAt" TIMESTAMP(3) DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "BotApiHistory_pkey" PRIMARY KEY ("id")
+);

server/prisma/schema.prisma

@@ -195,3 +195,12 @@ model DialoqbaseModels {
   deleted          Boolean  @default(false)
   createdAt        DateTime @default(now())
 }
+
+model BotApiHistory {
+  id         Int       @id @default(autoincrement())
+  api_key    String
+  bot_id     String?
+  human      String?
+  bot        String?
+  createdAt  DateTime? @default(now())
+}