feat: 🎸 new dashboard ui (#379)

gmpetrov · May 15, 2024 · cc957e3 · cc957e3
1 parent 1a060d6
commit cc957e3
Show file tree

Hide file tree

Showing 31 changed files with 2,117 additions and 1,612 deletions.
diff --git a/apps/dashboard/components/AgentDeployTab.tsx b/apps/dashboard/components/AgentDeployTab.tsx
@@ -123,8 +123,7 @@ function AgentDeployTab(props: Props) {
         disableSubmitButton
         cardProps={{
           sx: {
-            maxWidth: 'md',
-            mx: 'auto',
+            maxWidth: '100%',
           },
         }}
       >

diff --git a/apps/dashboard/components/ChatSection.tsx b/apps/dashboard/components/ChatSection.tsx
@@ -32,6 +32,7 @@ function ChatSection({
           rootSx={{
             pt: 1,
             height: '100%',
+            minHeight: '100%',
             width: '200px',
           }}
           currentConversationId={currentConversationId}

diff --git a/apps/dashboard/components/ConversationExport.tsx b/apps/dashboard/components/ConversationExport.tsx
@@ -1,22 +1,62 @@
 import DownloadForOfflineRoundedIcon from '@mui/icons-material/DownloadForOfflineRounded';
-import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
-import { Alert, Button, Card, Stack } from '@mui/joy';
+import { Button } from '@mui/joy';
 import axios from 'axios';
 import { saveAs } from 'file-saver';
 import { useState } from 'react';
 import { toast } from 'react-hot-toast';
+import { z } from 'zod';
 
-interface Props {}
+import {
+  ConversationChannel,
+  ConversationPriority,
+  MessageEval,
+} from '@chaindesk/prisma';
 
-export function ConversationExport({}: Props) {
+interface Props {
+  channel?: ConversationChannel;
+  priority?: ConversationPriority;
+  agentId?: string;
+  assigneeId?: string;
+  messageEval?: MessageEval;
+}
+
+export function ConversationExport({
+  channel,
+  priority,
+  messageEval,
+  agentId,
+  assigneeId,
+}: Props) {
   const [isLoading, setIsLoading] = useState(false);
   const exportConversations = async () => {
     try {
+      const { success: validChannel } = z
+        .nativeEnum(ConversationChannel)
+        .safeParse(channel);
+      const { success: validEval } = z
+        .nativeEnum(MessageEval)
+        .safeParse(messageEval);
+      const { success: validPriority } = z
+        .nativeEnum(MessageEval)
+        .safeParse(priority);
+
+      const { success: validAgentId } = z.string().min(3).safeParse(agentId);
+      const { success: validAssigneeId } = z
+        .string()
+        .min(3)
+        .safeParse(assigneeId);
+
       setIsLoading(true);
       const { data } = await toast.promise(
         axios.post(
           '/api/conversations/export',
-          {},
+          {
+            ...(validChannel ? { channel } : {}),
+            ...(validPriority ? { priority } : {}),
+            ...(validAgentId ? { agentId } : {}),
+            ...(validAssigneeId ? { assigneeId } : {}),
+            ...(validEval ? { messageEval } : {}),
+          },
           {
             responseType: 'blob',
           }

diff --git a/apps/dashboard/components/ConversationList.tsx b/apps/dashboard/components/ConversationList.tsx
@@ -1,8 +1,5 @@
-import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
 import AddRoundedIcon from '@mui/icons-material/AddRounded';
 import Button from '@mui/joy/Button';
-import Chip from '@mui/joy/Chip';
-import Divider from '@mui/joy/Divider';
 import List from '@mui/joy/List';
 import ListDivider from '@mui/joy/ListDivider';
 import ListItem from '@mui/joy/ListItem';
@@ -13,7 +10,7 @@ import Stack from '@mui/joy/Stack';
 import { SxProps } from '@mui/joy/styles/types';
 import Typography from '@mui/joy/Typography';
 import { useRouter } from 'next/router';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import InfiniteScroll from 'react-infinite-scroller';
 import useSWR, { useSWRConfig } from 'swr';
 import useSWRInfinite from 'swr/infinite';
@@ -65,8 +62,6 @@ const Item = (props: {
           </Typography>
         </ListItemButton>
       </ListItem>
-
-      {/* <ListDivider /> */}
     </React.Fragment>
   );
 };
@@ -80,6 +75,7 @@ function ConversationList({
 }: Props) {
   const scrollParentRef = useRef(null);
   const router = useRouter();
+
   const [state, setState] = useStateReducer({
     hasMore: true,
     hasLoadedOnce: false,
@@ -106,7 +102,7 @@ function ConversationList({
     },
     fetcher,
     {
-      refreshInterval: 5000,
+      refreshInterval: router?.query?.conversationId ? 5000 : 500,
       onSuccess: (data) => {
         const id = data?.[0]?.[0]?.id;
 
@@ -117,19 +113,25 @@ function ConversationList({
     }
   );
 
-  const conversations = getConversationsQuery?.data?.flat?.() || [];
+  const conversations = useMemo(
+    () => getConversationsQuery?.data?.flat?.() || [],
+    [getConversationsQuery?.data]
+  );
+
+  const conversationsLength = useMemo(
+    () => conversations.length,
+    [conversations]
+  );
 
   useEffect(() => {
+    const conversationId = (router.query.conversationId ||
+      conversations[0]?.id) as string;
     if (router.query?.conversationId) {
-      handleSelectConversation?.(router.query.conversationId as string);
+      handleSelectConversation?.(conversationId);
     } else {
-      handleSelectConversation?.(conversations[0]?.id);
+      handleSelectConversation?.(conversationId);
     }
-  }, [getConversationsQuery?.data]);
-
-  if (!getConversationsQuery.isLoading && conversations.length === 0) {
-    return null;
-  }
+  }, [conversationsLength]);
 
   return (
     <Stack
@@ -139,7 +141,6 @@ function ConversationList({
         borderColor: theme.palette.divider,
         ...(rootSx as any),
       })}
-      // gap={1}
     >
       <Button
         size="sm"
@@ -151,7 +152,7 @@ function ConversationList({
       >
         New Chat
       </Button>
-      {/* <Divider /> */}
+
       <List
         slotProps={{
           root: {
@@ -189,12 +190,14 @@ function ConversationList({
                   <ListItem>
                     <Skeleton variant="text" />
                   </ListItem>
-
-                  {/* <ListDivider />   */}
                 </React.Fragment>
               )) as any
           }
         >
+          {!router.query.conversationId && (
+            <Item id={'optimistic-id'} text={'new Chat'} selected={true} />
+          )}
+
           {conversations?.map((each) => (
             <Item
               key={each.id}

diff --git a/apps/dashboard/components/DatasourceForms/Base.tsx b/apps/dashboard/components/DatasourceForms/Base.tsx
@@ -76,7 +76,6 @@ const DatasourceText = (props: {
 
   return (
     <Textarea
-      // maxRows={21}
       minRows={4}
       disabled={props.disabled}
       {...methods.register('datasourceText')}
@@ -177,13 +176,6 @@ export default function BaseForm(props: Props) {
         }
       }
 
-      // const check = await axios.post('/api/datasources/check', payload);
-
-      // if (!check?.data?.valid) {
-      //   alert(check?.data?.message);
-      //   return;
-      // }
-
       const datasource = await upsertDatasourceMutation.trigger(payload as any);
 
       props?.onSubmitSuccess?.(datasource!);
@@ -234,13 +226,7 @@ export default function BaseForm(props: Props) {
 
         {props.children}
 
-        <details>
-          <summary>Advanced Settings</summary>
-
-          <Stack sx={{ pl: 2, pt: 2 }}>
-            <DatasourceTagsInput />
-          </Stack>
-        </details>
+        <DatasourceTagsInput />
 
         {!props.hideText && defaultValues?.datastoreId && defaultValues?.id && (
           <details>

diff --git a/apps/dashboard/components/DatastoreSettings.tsx b/apps/dashboard/components/DatastoreSettings.tsx
@@ -371,7 +371,8 @@ function DatastoreSettings() {
     <Box
       sx={(theme) => ({
         maxWidth: '100%',
-        width: theme.breakpoints.values.md,
+        width: '100%',
+        px: 4,
         mx: 'auto',
       })}
     >

diff --git a/apps/dashboard/components/FormInstallTab.tsx b/apps/dashboard/components/FormInstallTab.tsx
@@ -32,7 +32,7 @@ function FormInstallTab({ formId }: Props) {
 `;
 
   return (
-    <Card sx={{ maxWidth: 'md', mx: 'auto' }}>
+    <Card sx={{ mx: 'auto' }}>
       <AccordionGroup size="lg">
         <Accordion defaultExpanded>
           <AccordionSummary>Web Component</AccordionSummary>

diff --git a/apps/dashboard/components/FormSettingsTab.tsx b/apps/dashboard/components/FormSettingsTab.tsx
@@ -28,16 +28,13 @@ function FormSettingsTab({ formId }: Props) {
         }
 
         return (
-          <Stack sx={{ width: '100%', maxWidth: 'md', mx: 'auto', gap: 2 }}>
+          <Stack sx={{ width: '100%', mx: 'auto', gap: 2 }}>
             <SettingCard
               title="General Settings"
-              // description="Deploy your agent with the following widgets or integrations"
               disableSubmitButton
               cardProps={{
                 sx: {
                   width: '100%',
-                  // maxWidth: 'md',
-                  // mx: 'auto',
                 },
               }}
             >