Merge pull request #199 from n4ze3m/next

v1.7.1

app/ui/package.json

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

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

@@ -1,23 +1,83 @@
-import { ChatBubbleLeftIcon } from "@heroicons/react/24/outline";
-import { Link, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 import { useMessage } from "../../../hooks/useMessage";
 import { PlaygroundHistory } from "./types";
+import {
+  EllipsisHorizontalIcon,
+  PencilIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+import { Dropdown, notification } from "antd";
+import api from "../../../services/api";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Spin } from "antd";
+import React from "react";
 
 export const PlaygroundHistoryCard = ({
   item,
 }: {
   item: PlaygroundHistory;
 }) => {
-  const { historyId, setMessages, setHistory, setIsLoading } = useMessage();
+  const { historyId, setHistoryId, setMessages, setHistory } = useMessage();
   const params = useParams<{ id: string; history_id?: string }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [processingId, setProcessingId] = React.useState<string | null>(null);
+
+  const onDelete = async () => {
+    const url = `bot/playground/history/${item.id}`;
+    const response = await api.delete(url);
+    return response.data;
+  };
+
+  const onEdit = async (title: string) => {
+    const url = `bot/playground/history/${item.id}`;
+    const response = await api.put(url, { title });
+    return response.data;
+  };
+
+  const { mutate: editHistory, isLoading: isEditing } = useMutation(onEdit, {
+    onSuccess: () => {
+      queryClient.invalidateQueries([
+        "getBotPlaygroundHistory",
+        params.id,
+        params.history_id,
+      ]);
+    },
+    onError: () => {
+      notification.error({
+        message: "Error",
+        description: "Something went wrong",
+      });
+    },
+  });
+
+  const { mutate: deleteHistory, isLoading: isDeleting } = useMutation(
+    onDelete,
+    {
+      onSuccess: () => {
+        if (historyId === item.id) {
+          setHistoryId(null);
+          setMessages([]);
+          setHistory([]);
+          navigate(`/bot/${params.id}`);
+        }
+        queryClient.invalidateQueries([
+          "getBotPlaygroundHistory",
+          params.id,
+          params.history_id,
+        ]);
+      },
+      onError: () => {
+        notification.error({
+          message: "Error",
+          description: "Something went wrong",
+        });
+      },
+    }
+  );
+
   return (
-    <Link
-      to={`/bot/${params.id}/playground/${item.id}`}
-      onClick={() => {
-        setIsLoading(true);
-        setMessages([]);
-        setHistory([]);
-      }}
+    <div
       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
@@ -26,17 +86,73 @@ export const PlaygroundHistoryCard = ({
           : "bg-gray-100 dark:bg-[#0a0a0a] dark:text-gray-200"
       }`}
     >
-      <ChatBubbleLeftIcon className="w-5 h-5 text-gray-400 dark:text-gray-600 group-hover:text-gray-500 dark:group-hover:text-gray-400 transition-colors" />
-      <div className="flex-1 overflow-hidden break-all">
+      <Link
+        to={`/bot/${params.id}/playground/${item.id}`}
+        className="flex-1 overflow-hidden break-all"
+      >
         <span
           className="text-gray-500 dark:text-gray-400 text-sm font-semibold truncate"
           title={item.title}
         >
-          {item.title.length > 20
-            ? item.title.substring(0, 20) + "..."
-            : item.title}
+          {item.title}
         </span>
-      </div>
-    </Link>
+      </Link>
+      <Dropdown
+        disabled={(isDeleting || isEditing) && processingId === item.id}
+        menu={{
+          items: [
+            {
+              key: "1",
+              label: (
+                <button
+                  className="flex items-center gap-2 w-full "
+                  onClick={() => {
+                    const newTitle = prompt("Enter new title", item.title);
+                    if (newTitle) {
+                      editHistory(newTitle);
+                      setProcessingId(item.id);
+                    }
+                  }}
+                >
+                  <PencilIcon className="w-3 h-3 text-gray-500 dark:text-gray-400" />
+                  <span>Edit</span>
+                </button>
+              ),
+            },
+            {
+              key: "2",
+              label: (
+                <button
+                  onClick={() => {
+                    deleteHistory();
+                    setProcessingId(item.id);
+                  }}
+                  className="flex items-center gap-2 w-full text-red-500"
+                >
+                  <TrashIcon className="w-3 h-3 text-red-500 dark:text-red-400" />
+                  <span>Delete</span>
+                </button>
+              ),
+            },
+          ],
+        }}
+      >
+        {(isDeleting || isEditing) && processingId === item.id ? (
+          <Spin />
+        ) : (
+          <EllipsisHorizontalIcon
+            className={`text-gray-500 dark:text-gray-400 w-5 h-5 
+    ${
+      historyId === item.id
+        ? item.id === params.history_id
+          ? "opacity-100"
+          : "opacity-100"
+        : "opacity-0 hover:opacity-100 group-hover:opacity-100"
+    }
+    `}
+          />
+        )}
+      </Dropdown>
+    </div>
   );
 };

package.json

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

server/README.md

@@ -26,3 +26,8 @@ npm run dev
 ```
 
 The server will be running on `http://localhost:3000`. API documentation is available at `http://localhost:3000/docs`. 
+
+
+## Note
+
+I made a huge mistake on migrations folder naming. :/ I don't know how to fix it. I'm sorry.

server/prisma/migrations/q_14_1/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "DialoqbaseSettings" ADD COLUMN     "numberOfDocuments" INTEGER NOT NULL DEFAULT 10;

server/prisma/schema.prisma

@@ -85,6 +85,7 @@ model DialoqbaseSettings {
   noOfBotsPerUser       Int     @default(10)
   allowUserToCreateBots Boolean @default(true)
   allowUserToRegister   Boolean @default(false)
+  numberOfDocuments     Int     @default(10)
 }
 
 model BotIntegration {

server/src/handlers/api/v1/bot/playground/delete.handler.ts

@@ -0,0 +1,42 @@
+import { FastifyReply, FastifyRequest } from "fastify";
+import { DeleteBotByPlaygroundId } from "./types";
+
+export const deleteBotByPlaygroundId = async (
+  request: FastifyRequest<DeleteBotByPlaygroundId>,
+  reply: FastifyReply
+) => {
+  const user = request.user;
+  const { id } = request.params;
+
+  const prisma = request.server.prisma;
+
+  const isRealOwner = await prisma.botPlayground.findFirst({
+    where: {
+      id,
+      Bot: {
+        user_id: user.user_id,
+      },
+    },
+  });
+
+  if (!isRealOwner) {
+    return reply.status(404).send({
+      message: "Playground not found",
+    });
+  }
+  await prisma.botPlaygroundMessage.deleteMany({
+    where: {
+      botPlaygroundId: id,
+    },
+  });
+
+  await prisma.botPlayground.delete({
+    where: {
+      id,
+    },
+  });
+
+  return reply.status(200).send({
+    message: "Playground deleted",
+  });
+};

server/src/handlers/api/v1/bot/playground/index.ts

@@ -1,3 +1,5 @@
 export * from "./post.handler"
 export * from "./get.handler"
-export * from "./chat.handler"
+export * from "./chat.handler"
+export * from "./delete.handler"
+export * from "./put.handler"

server/src/handlers/api/v1/bot/playground/put.handler.ts

@@ -0,0 +1,41 @@
+import { FastifyReply, FastifyRequest } from "fastify";
+import { UpdateBotPlaygroundTitleById } from "./types";
+
+export const updateBotPlaygroundTitleById = async (
+  request: FastifyRequest<UpdateBotPlaygroundTitleById>,
+  reply: FastifyReply
+) => {
+  const user = request.user;
+  const prisma = request.server.prisma;
+
+  const { title } = request.body;
+  const { id } = request.params;
+
+  const isRealOwner = await prisma.botPlayground.findFirst({
+    where: {
+      id,
+      Bot: {
+        user_id: user.user_id,
+      },
+    },
+  });
+
+  if (!isRealOwner) {
+    return reply.status(404).send({
+      message: "Playground not found",
+    });
+  }
+
+  await prisma.botPlayground.update({
+    where: {
+      id,
+    },
+    data: {
+      title,
+    },
+  });
+
+  return reply.status(200).send({
+    message: "Playground updated",
+  });
+};

server/src/handlers/api/v1/bot/playground/types.ts

@@ -51,3 +51,18 @@ export interface UpdateBotAudioSettings {
     enabled: boolean;
   };
 }
+
+export interface DeleteBotByPlaygroundId {
+  Params: {
+    id: string;
+  };
+}
+
+export interface UpdateBotPlaygroundTitleById {
+  Body: {
+    title: string;
+  };
+  Params: {
+    id: string;
+  };
+}

server/src/routes/api/v1/bot/playground/root.ts

@@ -5,13 +5,17 @@ import {
   getPlaygroundHistoryByBotId,
   getPlaygroundHistoryByBotIdAndHistoryId,
   updateBotAudioSettingsHandler,
+  deleteBotByPlaygroundId,
+  updateBotPlaygroundTitleById
 } from "../../../../../handlers/api/v1/bot/playground";
 import {
   audioSettingsSchema,
   chatPlaygroundHistoryIdSchema,
   chatPlaygroundHistorySchema,
   chatRequestSchema,
   chatRequestStreamSchema,
+  deleteBotByPlaygroundIdSchema,
+  updateBotPlaygroundTitleByIdSchema,
 } from "../../../../../schema/api/v1/bot/playground";
 
 const root: FastifyPluginAsync = async (fastify, _): Promise<void> => {
@@ -60,6 +64,24 @@ const root: FastifyPluginAsync = async (fastify, _): Promise<void> => {
     },
     updateBotAudioSettingsHandler
   );
+
+  fastify.delete(
+    "/history/:id",
+    {
+      onRequest: [fastify.authenticate],
+      schema: deleteBotByPlaygroundIdSchema
+    },
+    deleteBotByPlaygroundId
+  );
+
+  fastify.put(
+    "/history/:id",
+    {
+      onRequest: [fastify.authenticate],
+      schema: updateBotPlaygroundTitleByIdSchema
+    },
+    updateBotPlaygroundTitleById
+  );
 };
 
 export default root;