From 5eef16899b6182bcefa32cf2046873136d328490 Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Fri, 7 Feb 2025 17:11:46 -0500
Subject: [PATCH] Create a new component for picking documents or document
 folders

---
 .../Experiment/Rag/PickADocumentMenu.tsx      | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 src/renderer/components/Experiment/Rag/PickADocumentMenu.tsx

diff --git a/src/renderer/components/Experiment/Rag/PickADocumentMenu.tsx b/src/renderer/components/Experiment/Rag/PickADocumentMenu.tsx
new file mode 100644
index 00000000..47b10356
--- /dev/null
+++ b/src/renderer/components/Experiment/Rag/PickADocumentMenu.tsx
@@ -0,0 +1,59 @@
+import {
+  Dropdown,
+  List,
+  ListItem,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Typography,
+} from '@mui/joy';
+import React, { useState, useEffect } from 'react';
+import * as chatAPI from '../../../lib/transformerlab-api-sdk';
+import useSWR from 'swr';
+import { FolderIcon } from 'lucide-react';
+const fetcher = (url) => fetch(url).then((res) => res.json());
+
+export default function PickADocumentMenu({
+  experimentInfo,
+  showFoldersOnly = false,
+}) {
+  const {
+    data: rows,
+    isLoading,
+    mutate,
+  } = useSWR(chatAPI.Endpoints.Documents.List(experimentInfo?.id, ''), fetcher);
+
+  return (
+    <Dropdown>
+      <MenuButton>Pick {showFoldersOnly ? 'Folder' : 'File'}</MenuButton>
+      <Menu>
+        {isLoading ? (
+          <MenuItem>Loading...</MenuItem>
+        ) : (
+          rows?.map((row) =>
+            showFoldersOnly ? (
+              row?.type == 'folder' && (
+                <MenuItem key={row.id} onClick={() => console.log(row)}>
+                  <Typography sx={{ display: 'flex', alignItems: 'center' }}>
+                    {row?.type == 'folder' ? <FolderIcon size="14px" /> : null}
+                    &nbsp;
+                    {row.name}
+                  </Typography>
+                </MenuItem>
+              )
+            ) : (
+              <MenuItem key={row.id} onClick={() => console.log(row)}>
+                <Typography sx={{ display: 'flex', alignItems: 'center' }}>
+                  {row?.type == 'folder' ? <FolderIcon size="14px" /> : null}
+                  &nbsp;
+                  {row.name}
+                </Typography>
+              </MenuItem>
+            )
+          )
+        )}
+      </Menu>
+    </Dropdown>
+  );
+}
-- 
GitLab