Add possibility to select a prompt template on chatbot creation (#51)

homanp · Apr 9, 2023 · 3c26559 · 3c26559 · vercel · Apr 9, 2023
1 parent 1d2b9eb
commit 3c26559
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 36 deletions.
diff --git a/app/app/chatbots/[chatbotId]/client-page.js b/app/app/chatbots/[chatbotId]/client-page.js
@@ -1,5 +1,5 @@
 "use client";
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import {
   Center,
@@ -14,7 +14,6 @@ import { useAsync } from "react-use";
 import { getChatbotById } from "@/lib/api";
 import Chat from "@/components/chat";
 import CodeBlock from "@/components/code-block";
-import AssignPromptTemplate from "@/components/chat/prompt-templates";
 
 import { API_DOCS } from "@/lib/api-docs";
 
@@ -26,11 +25,6 @@ export default function ChatbotClientPage({ chatbotId }) {
     setChatbot(data);
   }, [chatbotId, getChatbotById]);
 
-  const handleChange = useCallback(
-    (values) => setChatbot((prev) => ({ ...prev, ...values })),
-    []
-  );
-
   return (
     <Stack flex={1} spacing={4}>
       {isLoading && (
@@ -49,16 +43,6 @@ export default function ChatbotClientPage({ chatbotId }) {
                 {chatbot.name}
               </Text>
               <Stack paddingY={4} paddingX={6}>
-                <Stack>
-                  <Text fontSize="sm" fontWeight={500} color="gray.500">
-                    Provider
-                  </Text>
-                  <Text fontSize="sm">OpenAI</Text>
-                </Stack>
-                <AssignPromptTemplate
-                  chatbot={chatbot}
-                  onChange={handleChange}
-                />
                 <Stack>
                   <Text fontSize="sm" fontWeight={500} color="gray.500">
                     Datasources

diff --git a/app/app/chatbots/client-page.js b/app/app/chatbots/client-page.js
@@ -5,55 +5,82 @@ import Link from "next/link";
 import {
   Button,
   Center,
+  Container,
+  FormControl,
   HStack,
   Icon,
   IconButton,
+  Input,
+  Select,
   Spinner,
   Stack,
   Table,
   TableContainer,
   Tbody,
+  Text,
   Tr,
   Td,
   useColorModeValue,
 } from "@chakra-ui/react";
 import { TbPlus, TbTrashX } from "react-icons/tb";
-import { useAsync, useAsyncFn } from "react-use";
+import { useAsync } from "react-use";
+import { useForm } from "react-hook-form";
 import PageHeader from "@/components/page-header";
 import { useSidebar } from "@/lib/sidebar";
-import { createChatbot, getChatbots, removeChatbotById } from "@/lib/api";
+import {
+  createChatbot,
+  getChatbots,
+  getPrompTemplates,
+  removeChatbotById,
+} from "@/lib/api";
 
 export default function ChatbotsClientPage() {
+  const [showForm, setShowForm] = useState();
+  const [chatbots, setChatbots] = useState([]);
+  const [promptTemplates, setPromptTemplates] = useState([]);
   const buttonColorScheme = useColorModeValue("blackAlpha", "whiteAlpha");
   const buttonBackgroundColor = useColorModeValue("black", "white");
   const borderBottomColor = useColorModeValue("gray.50", "#333");
   const router = useRouter();
   const menu = useSidebar();
-  const [chatbots, setChatbots] = useState([]);
 
-  const { loading: isLoading } = useAsync(async () => {
-    const { data } = await getChatbots();
-    setChatbots(data);
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    register,
+  } = useForm();
 
-    return data;
-  }, [getChatbots]);
+  const { loading: isLoading } = useAsync(async () => {
+    const [{ data: chatbots }, { data: promptTemplates }] = await Promise.all([
+      getChatbots(),
+      getPrompTemplates(),
+    ]);
 
-  const [{ loading: isCreatingChatbot }, handleCreateChatbot] =
-    useAsyncFn(async () => {
-      const payload = {
-        name: "Untitled",
-      };
-      const { data: chatbot } = await createChatbot(payload);
+    setChatbots(chatbots);
+    setPromptTemplates(promptTemplates);
 
-      router.push(`/app/chatbots/${chatbot.id}`);
-    }, [createChatbot, router]);
+    return;
+  }, [getChatbots, getPrompTemplates, setChatbots]);
 
   const handleRemoveChatbot = useCallback(async (chatbotId) => {
     await removeChatbotById(chatbotId);
 
     setChatbots((prev) => prev.filter(({ id }) => id !== chatbotId));
   }, []);
 
+  const onSubmit = useCallback(
+    async (values) => {
+      const { name, promptTemplateId } = values;
+      const { data: chatbot } = await createChatbot({
+        name,
+        promptTemplateId: parseInt(promptTemplateId),
+      });
+
+      router.push(`/app/chatbots/${chatbot.id}`);
+    },
+    [router]
+  );
+
   return (
     <Stack flex={1} paddingX={4} paddingY={4} spacing={4}>
       <PageHeader
@@ -66,8 +93,8 @@ export default function ChatbotsClientPage() {
             colorScheme={buttonColorScheme}
             backgroundColor={buttonBackgroundColor}
             size="sm"
-            onClick={handleCreateChatbot}
-            isLoading={isCreatingChatbot}
+            onClick={() => setShowForm(true)}
+            isLoading={isSubmitting}
             loadingText="Creating..."
           >
             New chatbot
@@ -79,7 +106,7 @@ export default function ChatbotsClientPage() {
           <Spinner size="sm" />
         </Center>
       )}
-      {!isLoading && (
+      {!isLoading && !showForm && (
         <TableContainer>
           <Table size="sm">
             <Tbody>
@@ -106,6 +133,60 @@ export default function ChatbotsClientPage() {
           </Table>
         </TableContainer>
       )}
+      {showForm && (
+        <Center flex={1}>
+          <Container maxWidth="md" as="form" onSubmit={handleSubmit(onSubmit)}>
+            <Stack spacing={6}>
+              <Stack spacing={1}>
+                <Icon
+                  fontSize="2xl"
+                  as={menu.find(({ id }) => id === "chatbots").icon}
+                />
+                <Text>New chatbot</Text>
+                <Text fontSize="sm" color="gray.500">
+                  Create a new chatbot
+                </Text>
+              </Stack>
+              <Stack spacing={3}>
+                <FormControl isInvalid={errors?.name}>
+                  <Input
+                    size="sm"
+                    placeholder="My chatbot..."
+                    {...register("name", { required: true })}
+                  />
+                </FormControl>
+                <FormControl>
+                  <Select
+                    size="sm"
+                    {...register("promptTemplateId")}
+                    placeholder="Select prompt template"
+                  >
+                    {promptTemplates.map(({ id, name }) => (
+                      <option key={id} value={id}>
+                        {name}
+                      </option>
+                    ))}
+                  </Select>
+                </FormControl>
+              </Stack>
+              <HStack justifyContent="flex-end">
+                <Button variant="ghost" size="sm" onClick={() => setShowForm()}>
+                  Cancel
+                </Button>
+                <Button
+                  colorScheme={buttonColorScheme}
+                  backgroundColor={buttonBackgroundColor}
+                  type="sumbit"
+                  size="sm"
+                  isLoading={isSubmitting}
+                >
+                  Save
+                </Button>
+              </HStack>
+            </Stack>
+          </Container>
+        </Center>
+      )}
     </Stack>
   );
 }