[TSK-259] Easy features

lib/components/conversation/mermaid-message-content.tsx

@@ -1,3 +1,4 @@
+"use client";
 import mermaid from "mermaid";
 import { ReactNode, useEffect } from "react";
 

lib/components/dialog/CreateConversationDialog.tsx

@@ -25,12 +25,15 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { PenSquare } from "lucide-react";
+import { useState } from "react";
 
 export interface buttonActionInputValues {
   conversationTitle: string;
 }
 
 export interface CreateConversationDialogProps {
+  isEnabled: boolean;
+  isOpen?: boolean;
   buttonAction: (inputValues: buttonActionInputValues) => void;
 }
 
@@ -50,6 +53,8 @@ const formSchema = z.object({
  * Create a new conversation dialog
  */
 export const CreateConversationDialog = ({
+  isEnabled,
+  isOpen = false,
   buttonAction,
   ...props
 }: CreateConversationDialogProps) => {
@@ -61,13 +66,22 @@ export const CreateConversationDialog = ({
   });
 
   const onSubmitWrapper = (values: z.infer<typeof formSchema>) => {
+    setIsDialogOpen(false);
     buttonAction(values);
   };
 
+  const [isDialogOpen, setIsDialogOpen] = useState(isOpen);
+
   return (
-    <ShadcnDialog {...props}>
+    <ShadcnDialog open={isDialogOpen} onOpenChange={setIsDialogOpen} {...props}>
       <DialogTrigger asChild>
-        <Button variant="default" size="icon" label={<PenSquare />} />
+        <Button
+          variant="default"
+          size="icon"
+          label={<PenSquare />}
+          disabled={!isEnabled}
+          onClick={() => setIsDialogOpen(true)}
+        />
       </DialogTrigger>
 
       <DialogContent
@@ -80,7 +94,9 @@ export const CreateConversationDialog = ({
           "text-black dark:text-white",
         )}
       >
-        <DialogClose asChild />
+        <div onClick={() => setIsDialogOpen(false)}>
+          <DialogClose asChild />
+        </div>
 
         <DialogHeader>
           <DialogTitle>New conversation</DialogTitle>

lib/components/table/BaseAGGrid.tsx

@@ -272,7 +272,7 @@ export function BaseAGGrid<TRowData>({
         <div
           id="ag-grid-inner-component"
           className={cn("ag-theme-sda h-screen overflow-auto")}
-          style={{ height: "80vh", width: "80vw" }}
+          style={{ height: "80vh", width: "100vw" }}
         >
           <AgGridReact
             loading={isLoading}
@@ -294,7 +294,7 @@ export function BaseAGGrid<TRowData>({
         <div
           id="ag-grid-inner-component"
           className={cn("ag-theme-sda h-screen overflow-auto")}
-          style={{ height: "80vh", width: "80vw" }}
+          style={{ height: "80vh", width: "100vw" }}
         >
           <AgGridReact
             rowData={[]}

lib/components/table/ConversationAGGrid.tsx

@@ -29,6 +29,7 @@ export type ConversationRow = z.infer<typeof ConversationRowSchema>;
 export interface ConversationAGGridProps {
   rowData: ConversationRow[];
   isLoading: boolean;
+  newConversationIsEnabled: boolean;
   handleGoToConversation: (id: number) => void;
   handleNewConversation: (conversationTitle: string) => void;
   errorOverlayProps?: {
@@ -61,14 +62,20 @@ const GoToConversationButton = (params: GoToConversationButtonParams) => {
 };
 
 const NewConversationComponent = (
+  isEnabled: boolean,
   handleNewConversation: (title: string) => void,
 ) => {
   // Wrapper to pass it as a buttonAction to the dialog
   const newConversationAction = (inputValues: buttonActionInputValues) => {
     handleNewConversation(inputValues.conversationTitle);
   };
 
-  return <CreateConversationDialog buttonAction={newConversationAction} />;
+  return (
+    <CreateConversationDialog
+      isEnabled={isEnabled}
+      buttonAction={newConversationAction}
+    />
+  );
 };
 
 /**
@@ -114,7 +121,10 @@ export function ConversationAGGrid(props: ConversationAGGridProps) {
         rowData={props.rowData}
         columnDefs={columnDefs}
         additionalComponentsLeft={[
-          NewConversationComponent(props.handleNewConversation),
+          NewConversationComponent(
+            props.newConversationIsEnabled,
+            props.handleNewConversation,
+          ),
         ]}
         errorOverlayProps={props.errorOverlayProps}
         // @ts-expect-error TODO: fix typing here somehow, passing "AGGridProps = { {context = ... } }" to "BaseAGGrid" doesn't work

lib/components/table/SelectableSourceDataAGGrid.tsx

@@ -0,0 +1,107 @@
+"use client";
+import { z } from "zod";
+import { BaseAGGrid } from "./BaseAGGrid";
+import { ColDef } from "ag-grid-community";
+import { useState } from "react";
+
+import { Button as ShadcnButton } from "@/components/button/index";
+
+const SourceDataRowSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  relativePath: z.string(),
+  createdAt: z.string(),
+});
+
+/**
+ * SourceDataRow is a type that represents the structure of the data that will be displayed in the AG Grid.
+ */
+export type SelectableSourceDataRow = z.infer<typeof SourceDataRowSchema>;
+
+/**
+ * SourceDataAGGridProps is an interface that defines the props for the SourceDataAGGrid component.
+ * @param rowData: the data to be displayed in the AG Grid. Must be an array of SourceDataRow objects.
+ * @param buttonsWithCallBack: an array of objects containing a reactComponent and a callbackFunction.
+ */
+export interface SelectableSourceDataAGGridProps {
+  rowData: SelectableSourceDataRow[];
+  isLoading: boolean;
+  handleConfirmSelection: (selectedRows: SelectableSourceDataRow[]) => void;
+  errorOverlayProps?: {
+    errorStatus: boolean;
+    overlayText: string;
+  };
+}
+
+const ConfirmSelectionButton = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <ShadcnButton
+      label={"Confirm Selection"}
+      variant="default"
+      onClick={onClick}
+      title="Confirm the selected rows"
+    />
+  );
+};
+
+/**
+ * SourceDataAGGrid is a react component that displays a table of source data in an AG Grid.
+ * @param rowData: the data to be displayed in the AG Grid. Must be an array of SourceDataRow objects.
+ * @param handleDownloadSourceData: a function that is called when the download button is clicked.
+ * @param handleUploadSourceData: a function that is called when the upload button is clicked.
+ * @param isLoading: a boolean that indicates whether the data is still loading.
+ * @param errorOverlayProps: an object that contains the error status and overlay text.
+ * @returns a react component that displays a table of source data in an AG Grid.
+ */
+export function SelectableSourceDataAGGrid(
+  props: SelectableSourceDataAGGridProps,
+) {
+  const [columnDefs] = useState<ColDef[]>([
+    {
+      headerCheckboxSelection: true,
+      headerCheckboxSelectionFilteredOnly: true,
+      checkboxSelection: true,
+      headerName: "ID",
+      filter: false,
+      field: "id",
+      flex: 0.3,
+    },
+    {
+      headerName: "Name",
+      field: "name",
+      flex: 1.5,
+    },
+    {
+      headerName: "Relative Path",
+      field: "relativePath",
+      flex: 2,
+    },
+    {
+      headerName: "Created At",
+      field: "createdAt",
+      flex: 1,
+    },
+    {
+      headerName: "",
+      filter: false,
+      flex: 0.5,
+    },
+  ]);
+
+  return (
+    <div>
+      <BaseAGGrid
+        isLoading={props.isLoading}
+        rowData={props.rowData}
+        columnDefs={columnDefs}
+        componentsWithCallBack={[
+          {
+            reactComponent: ConfirmSelectionButton,
+            callbackFunction: props.handleConfirmSelection,
+          },
+        ]}
+        errorOverlayProps={props.errorOverlayProps}
+      />
+    </div>
+  );
+}

lib/components/table/SourceDataAGGrid.tsx

@@ -26,7 +26,9 @@ export type SourceDataRow = z.infer<typeof SourceDataRowSchema>;
 export interface SourceDataAGGridProps {
   rowData: SourceDataRow[];
   isLoading: boolean;
-  handleDownloadSourceData: (relativePath: string) => void;
+  isUploading: boolean;
+  enableUpload: boolean;
+  handleDownloadSourceData: (name: string, relativePath: string) => void;
   handleUploadSourceData: () => void;
   errorOverlayProps?: {
     errorStatus: boolean;
@@ -36,31 +38,49 @@ export interface SourceDataAGGridProps {
 
 interface DownloadSourceDataButtonParams {
   context: {
-    handleDownloadSourceData: (relativePath: string) => void;
+    handleDownloadSourceData: (name: string, relativePath: string) => void;
   };
   data: {
+    name: string;
     relativePath: string;
   };
 }
 
 const DownloadSourceDataButton = (params: DownloadSourceDataButtonParams) => {
   const handleClick = () => {
-    params.context.handleDownloadSourceData(params.data.relativePath);
+    params.context.handleDownloadSourceData(
+      params.data.name,
+      params.data.relativePath,
+    );
   };
 
   return (
     <ShadcnButton label={"Download"} variant="default" onClick={handleClick} />
   );
 };
 
-const UploadSourceDataComponent = (handleUploadSourceData: () => void) => {
-  return (
-    <ShadcnButton
-      label={"Upload"}
-      variant="default"
-      onClick={handleUploadSourceData}
-    />
-  );
+const UploadSourceDataComponent = (
+  enableUpload: boolean,
+  isUploading: boolean,
+  handleUploadSourceData: () => void,
+) => {
+  if (!enableUpload) {
+    return null;
+  }
+
+  if (isUploading) {
+    return (
+      <ShadcnButton label={"Uploading..."} variant="default" disabled={true} />
+    );
+  } else {
+    return (
+      <ShadcnButton
+        label={"Upload"}
+        variant="default"
+        onClick={handleUploadSourceData}
+      />
+    );
+  }
 };
 
 /**
@@ -114,7 +134,11 @@ export function SourceDataAGGrid(props: SourceDataAGGridProps) {
         rowData={props.rowData}
         columnDefs={columnDefs}
         additionalComponentsLeft={[
-          UploadSourceDataComponent(props.handleUploadSourceData),
+          UploadSourceDataComponent(
+            props.enableUpload,
+            props.isUploading,
+            props.handleUploadSourceData,
+          ),
         ]}
         errorOverlayProps={props.errorOverlayProps}
         // @ts-expect-error TODO: fix typing here somehow, passing "AGGridProps = { {context = ... } }" to "BaseAGGrid" doesn't work