bot prompt editor

README.md

@@ -1,11 +1,23 @@
-# Dialoqbase ⚡
 
+<h1 align="center">⚡Dialoqbase ⚡</h1>
+<p align="center">
+ Create chatbots with ease
+</p>
+
+<div align="center"> 
+
+  [![Join dialoqbase #welcome](https://img.shields.io/badge/discord-join%20chat-blue.svg)](https://discord.gg/SPE3npH7Wu)
+  [![Build Status](https://github.com/n4ze3m/dialoqbase/actions/workflows/build.yml/badge.svg)](https://github.com/n4ze3m/dialoqbase/actions/workflows/build.yml)
+  [![License: MIT](https://img.shields.io/github/license/n4ze3m/dialoqbase)](https://github.com/n4ze3m/dialoqbase/blob/master/LICENSE)
+
+</div>
 Dialoqbase is an open-source application designed to facilitate the creation of custom chatbots using a personalized knowledge base. The application leverages advanced language models to generate accurate and context-aware responses. Additionally, it utilizes PostgreSQL, a robust relational database management system, for efficient vector search operations and for storing the knowledge base.
 
 Here's a demo of how it works (v0.0.1):
 
 [![DialoqBase Demo](https://img.youtube.com/vi/Kktfs8JI4yI/0.jpg)](https://www.youtube.com/watch?v=Kktfs8JI4yI)
 
+
 ## Quick Deployments
 
 ### Railway with Supabase
@@ -99,7 +111,7 @@ Dialoqbase is a side project and is not ready for production. It is still in the
 - [x] Plane text
 - [x] PDF (beta)
 - [x] Web crawler (beta)
-- [x] Microsoft Word documents
+- [x] Microsoft Word documents (beta)
 - [ ] Sitemap
 - [ ] Github repository
 - [ ] mp3
@@ -131,7 +143,7 @@ need more ? create an issue...
 - [x] Vector search
 - [x] Bot embed script for websites
 - [ ] Supabase Integration
-- [ ] Bot style editor
+- [X] Prompt Editor
 - [ ] Chatbot API
 - [ ] Chatbot theme editor
 - [ ] Chatbot analytics
@@ -145,4 +157,4 @@ need more ? create an issue...
 
 ## License
 
-[MIT](LICENSE)
+[MIT](LICENSE)

app/ui/src/Layout/index.tsx

@@ -142,7 +142,7 @@ export default function DashboardLayout({
         </Disclosure>
         <div className="py-10">
           <main>
-            <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">{children}</div>
+            <div className="mx-auto max-w-7xl px-3 sm:px-6 lg:px-8">{children}</div>
           </main>
         </div>
       </div>

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

@@ -16,6 +16,8 @@ export const SettingsCard = ({
     public_id: string;
     temperature: number;
     embedding: string;
+    qaPrompt: string;
+    questionGeneratorPrompt: string;
   };
 }) => {
   const [form] = Form.useForm();
@@ -36,7 +38,7 @@ export const SettingsCard = ({
         message: "Bot updated successfully",
       });
     },
-    onError: (error:any) => {
+    onError: (error: any) => {
       if (axios.isAxiosError(error)) {
         const message = error.response?.data?.message || "Something went wrong";
         notification.error({
@@ -92,6 +94,8 @@ export const SettingsCard = ({
           model: data.model,
           temperature: data.temperature,
           embedding: data.embedding,
+          qaPrompt: data.qaPrompt,
+          questionGeneratorPrompt: data.questionGeneratorPrompt,
         }}
         form={form}
         onFinish={updateBotSettings}
@@ -179,6 +183,27 @@ export const SettingsCard = ({
                   options={availableEmbeddingTypes}
                 />
               </Form.Item>
+
+              <Form.Item
+                label={
+                  <span className="font-medium text-gray-800 text-sm">
+                    Question Answering Prompt (System Prompt)
+                  </span>
+                }
+                name="qaPrompt"
+                rules={[
+                  {
+                    required: true,
+                    message: "Please input a prompt!",
+                  },
+                ]}
+              >
+                <textarea
+                  className="mt-1 block w-full shadow-sm sm:text-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"
+                  rows={5}
+                  placeholder=""
+                />
+              </Form.Item>
             </div>
           </div>
 

app/ui/src/components/Dashboard/DashboardGrid.tsx

@@ -40,11 +40,18 @@ export const DashboardGrid = () => {
               className="flex rounded-md shadow-sm hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer"
               key={bot.id}
             >
-              <div className="flex flex-1  items-center justify-between truncate rounded-md border border-gray-200 bg-white">
-                <div className="flex-1 truncate px-4 py-4 text-sm">
-                  <h3 className="font-medium text-gray-900 hover:text-gray-600">
+              <div className="pb-9 flex flex-1  items-center justify-between truncate rounded-md border border-gray-200 bg-white">
+                <div className="flex-1 truncate px-4 py-4">
+                  <h3 className="text-xl font-semibold text-gray-900 hover:text-gray-600 flex-shrink truncate">
                     {bot.name}
                   </h3>
+                  <div className="w-full">
+                    <div className="flex items-end justify-between">
+                      <span className="text-xs lowercase text-scale-1000 text-gray-600">
+                      {bot.model}
+                      </span>
+                    </div>
+                  </div>
                 </div>
                 <div className="flex-shrink-0 pr-2">
                   <button

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

@@ -21,6 +21,8 @@ export default function BotSettingsRoot() {
           public_id: string;
           temperature: number;
           embedding: string;
+          qaPrompt: string;
+          questionGeneratorPrompt: string;
         };
       };
     },

package.json

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

server/prisma/migrations/qa/migration.sql

@@ -0,0 +1,4 @@
+ALTER TABLE "public"."Bot"
+ADD "questionGeneratorPrompt" text NOT NULL DEFAULT 'Given the following conversation and a follow up question, rephrase the follow up question to be a standalone question.   Chat History: {chat_history} Follow Up Input: {question} Standalone question:',
+ADD "qaPrompt" text NOT NULL DEFAULT 'You are a helpful AI assistant. Use the following pieces of context to answer the question at the end. If you don''t know the answer, just say you don''t know. DO NOT try to make up an answer. If the question is not related to the context, politely respond that you are tuned to only answer questions that are related to the context.  {context}  Question: {question} Helpful answer in markdown:';
+COMMENT ON TABLE "Bot" IS '';

server/prisma/schema.prisma

@@ -6,21 +6,23 @@ generator client {
 datasource db {
   provider   = "postgresql"
   url        = env("DATABASE_URL")
-  extensions = [pgvector(map: "vector", schema: "extensions")]
+  extensions = [vector(schema: "public")]
 }
 
 model Bot {
-  id          String        @id @default(cuid())
-  publicId    String        @unique @default(uuid())
-  name        String
-  description String?
-  createdAt   DateTime      @default(now())
-  temperature Float         @default(0.7)
-  model       String        @default("gpt-3.5-turbo")
-  provider    String        @default("openai")
-  embedding   String        @default("openai")
-  document    BotDocument[]
-  source      BotSource[]
+  id                      String        @id @default(cuid())
+  publicId                String        @unique @default(uuid())
+  name                    String
+  description             String?
+  createdAt               DateTime      @default(now())
+  temperature             Float         @default(0.7)
+  model                   String        @default("gpt-3.5-turbo")
+  provider                String        @default("openai")
+  embedding               String        @default("openai")
+  questionGeneratorPrompt String        @default("Given the following conversation and a follow up question, rephrase the follow up question to be a standalone question.   Chat History: {chat_history} Follow Up Input: {question} Standalone question:")
+  qaPrompt                String        @default("You are a helpful AI assistant. Use the following pieces of context to answer the question at the end. If you don't know the answer, just say you don't know. DO NOT try to make up an answer. If the question is not related to the context, politely respond that you are tuned to only answer questions that are related to the context.  {context}  Question: {question} Helpful answer in markdown:")
+  document                BotDocument[]
+  source                  BotSource[]
 }
 
 model BotSource {

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

@@ -60,5 +60,7 @@ export interface UpdateBotById {
     name: string;
     temperature: number;
     model: string;
+    qaPrompt: string;
+    questionGeneratorPrompt: string;
   };
 }

server/src/routes/api/v1/bot/schema/index.ts

@@ -99,6 +99,12 @@ export const updateBotByIdSchema: FastifySchema = {
       model: {
         type: "string",
       },
+      questionGeneratorPrompt: {
+        type: "string",
+      },
+      qaPrompt: {
+        type: "string",
+      }
     },
   },
 };

server/src/routes/bot/handlers/index.ts

@@ -6,22 +6,6 @@ import { embeddings } from "../../../utils/embeddings";
 import { chatModelProvider } from "../../../utils/models";
 
 // prompt copied from https://github.com/mayooear/gpt4-pdf-chatbot-langchain
-const CONDENSE_PROMPT =
-  `Given the following conversation and a follow up question, rephrase the follow up question to be a standalone question.
-
-Chat History:
-{chat_history}
-Follow Up Input: {question}
-Standalone question:`;
-const QA_PROMPT =
-  `You are a helpful AI assistant. Use the following pieces of context to answer the question at the end.
-If you don't know the answer, just say you don't know. DO NOT try to make up an answer.
-If the question is not related to the context, politely respond that you are tuned to only answer questions that are related to the context.
-
-{context}
-
-Question: {question}
-Helpful answer in markdown:`;
 
 export const chatRequestHandler = async (
   request: FastifyRequest<ChatRequestBody>,
@@ -82,8 +66,8 @@ export const chatRequestHandler = async (
     model,
     vectorstore.asRetriever(),
     {
-      qaTemplate: QA_PROMPT,
-      questionGeneratorTemplate: CONDENSE_PROMPT,
+      qaTemplate: bot.qaPrompt,
+      questionGeneratorTemplate: bot.questionGeneratorPrompt,
       returnSourceDocuments: true,
     },
   );