feat: implement Shinkai Sheet & Tooling (#364)

* wip table * update packagelock * wip * wip sheet features * wip sheet features * shinkai sheet UI * fixes * update packagelock * implement list of workflows, field types + agents * feat: add column/row * feat: list user sheets * feat: add/remove/list user sheets dashboard * feat: wip get sheet info * fixes * wip * fixes * feat: set/remove column * update wasm * feat: add/remove rows * fixes * feat: remove selected rows * feat: cell update value, types * improve: create/delete projects * improvements * fixes * fixes * fix workflow * fixes * improvements * feat: add support Formula, LLMCalls * fixes * feat: form validation on add column * more fixes * more fixes * feat: multiple VR Files * fix sorting * fix * improvements * feat: hide properties * fix: wording * fix: visible columns * feat: row details * fix * fix * ui improvements * ui improvements * ui improvements * fix zod validation * reset form * fix cell form * fix pending ui * feat: add VR files type support * feat: sorting * feat: height row * fix * feat: add column reference letter * add microanimations * fixes * fixes * fixes * fixes * wip airtable ux for navigation + editing * fixes * feat: copy paste cell, improve selection/focus cells * fix * feat: update workflows payload * feat: list shinkai tools * fix: empty state sheet + last updated * fix: remove filtering tools * feat: listing tools and update config (wip) * feat: tool details * wip: ws cell update * wip: ws cell update * fixes ux sheet * feat: ws for updating AI cells * fix: no refetch for cell updates * fixes * fix: workflowKey in sheet * feat: update tool enabled * fixes * feat: search tools * disable edit workflow temporary * fix: packagelock --------- Co-authored-by: Nico Arqueros <[email protected]>
dcSpark · Aug 16, 2024 · 81d9aab · 81d9aab
1 parent 788e7f3
commit 81d9aab
Show file tree

Hide file tree

Showing 94 changed files with 7,378 additions and 617 deletions.
diff --git a/apps/shinkai-desktop/src/components/sheet/columns.tsx b/apps/shinkai-desktop/src/components/sheet/columns.tsx
@@ -0,0 +1,106 @@
+import {
+  Columns,
+  FormattedRow,
+} from '@shinkai_network/shinkai-node-state/lib/queries/getSheet/types';
+import { Checkbox } from '@shinkai_network/shinkai-ui';
+import { cn } from '@shinkai_network/shinkai-ui/utils';
+import { ColumnDef } from '@tanstack/react-table';
+
+import { DataTableCell } from './data-table-cell';
+import { DataTableColumnHeader } from './data-table-column-header';
+import { DataTableRowDetails } from './data-table-row-details';
+// import { DataTableRowActions } from './data-table-row-actions';
+
+export const generateColumns = (
+  columns: Columns,
+  display_columns: string[],
+): ColumnDef<FormattedRow>[] => {
+  // TODO: remove the following line after fixing the display_columns in the node api
+  const uniqueDisplayColumns = display_columns.filter(
+    (item, index) => display_columns.indexOf(item) === index,
+  );
+  const formattedColumns = uniqueDisplayColumns
+    .map((id) => ({
+      ...columns[id],
+      columnLetter: String.fromCharCode(65 + uniqueDisplayColumns.indexOf(id)),
+    }))
+    .filter(Boolean);
+
+  return [
+    {
+      id: 'select',
+      maxSize: 74,
+      header: ({ table }) => (
+        <div className="h-4 w-4 justify-self-start">
+          <Checkbox
+            aria-label="Select all"
+            checked={
+              table.getIsAllPageRowsSelected() ||
+              (table.getIsSomePageRowsSelected() && 'indeterminate')
+            }
+            onCheckedChange={(value) =>
+              table.toggleAllPageRowsSelected(!!value)
+            }
+          />
+        </div>
+      ),
+      cell: ({ row }) => (
+        <div className="group flex size-full items-center gap-2">
+          <div className="flex h-4 w-4 items-center justify-center py-2">
+            <Checkbox
+              aria-label="Select row"
+              checked={row.getIsSelected()}
+              className={cn(
+                'hidden group-hover:block',
+                row.getIsSelected() && 'block',
+              )}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+            />
+            <span
+              className={cn(
+                'text-gray-80 block group-hover:hidden',
+                row.getIsSelected() && 'hidden',
+              )}
+            >
+              {row.index + 1}
+            </span>
+          </div>
+          <span className="invisible group-hover:visible">
+            <DataTableRowDetails columns={columns} row={row} />
+          </span>
+        </div>
+      ),
+      enableHiding: false,
+    },
+    ...formattedColumns.map((columnItem) => {
+      return {
+        accessorKey: columnItem.id,
+        header: (info) => (
+          <DataTableColumnHeader
+            column={info.column}
+            columnBehavior={columnItem.behavior}
+            columnLetter={columnItem.columnLetter}
+            title={columnItem.name}
+          />
+        ),
+        cell: ({ row, column }) => {
+          return (
+            <DataTableCell
+              column={column}
+              columnBehavior={columnItem.behavior}
+              row={row}
+              status={row.original.fields[column.id]?.status}
+              title={columnItem.name}
+              value={row.original.fields[column.id]?.value ?? ''}
+            />
+          );
+        },
+        sortingFn: (a, b) => {
+          const aVal = a.original.fields[columnItem.id]?.value ?? '';
+          const bVal = b.original.fields[columnItem.id]?.value ?? '';
+          return aVal.localeCompare(bVal);
+        },
+      } as ColumnDef<FormattedRow>;
+    }),
+  ];
+};
diff --git a/apps/shinkai-desktop/src/components/sheet/constants.ts b/apps/shinkai-desktop/src/components/sheet/constants.ts
@@ -0,0 +1,36 @@
+import { ColumnType } from '@shinkai_network/shinkai-message-ts/models/SchemaTypes';
+import { FilesIcon, FormulaIcon } from '@shinkai_network/shinkai-ui/assets';
+import { FileUpIcon, HashIcon, SparklesIcon, TextIcon } from 'lucide-react';
+
+export const fieldTypes = [
+  {
+    id: ColumnType.Text,
+    label: 'Text',
+    icon: TextIcon,
+  },
+  {
+    id: ColumnType.Number,
+    label: 'Number',
+    icon: HashIcon,
+  },
+  {
+    id: ColumnType.Formula,
+    label: 'Formula',
+    icon: FormulaIcon,
+  },
+  {
+    id: ColumnType.LLMCall,
+    label: 'AI Generated',
+    icon: SparklesIcon,
+  },
+  {
+    id: ColumnType.MultipleVRFiles,
+    label: 'AI Local Files',
+    icon: FilesIcon,
+  },
+  {
+    id: ColumnType.UploadedFiles,
+    label: 'Upload Files',
+    icon: FileUpIcon,
+  },
+];
diff --git a/apps/shinkai-desktop/src/components/sheet/context/table-context.tsx b/apps/shinkai-desktop/src/components/sheet/context/table-context.tsx
@@ -0,0 +1,53 @@
+import React, { createContext, useContext, useRef } from 'react';
+import { createStore, useStore } from 'zustand';
+
+export interface SelectedCell {
+  isFocused: boolean;
+  rowId: string;
+  columnId: string;
+}
+
+type TableSheetStore = {
+  selectedCell: SelectedCell | null;
+  setSelectedCell: (cell?: SelectedCell | null) => void;
+};
+
+const createTableSheetStore = () =>
+  createStore<TableSheetStore>((set) => ({
+    selectedCell: null,
+    setSelectedCell: (cell) =>
+      set({
+        selectedCell: cell,
+      }),
+  }));
+
+const TableSheetContext = createContext<ReturnType<
+  typeof createTableSheetStore
+> | null>(null);
+
+export const TableSheetProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const storeRef = useRef<ReturnType<typeof createTableSheetStore>>();
+  if (!storeRef.current) {
+    storeRef.current = createTableSheetStore();
+  }
+  return (
+    <TableSheetContext.Provider value={storeRef.current}>
+      {children}
+    </TableSheetContext.Provider>
+  );
+};
+
+export function useSheetProjectStore<T>(
+  selector: (state: TableSheetStore) => T,
+) {
+  const store = useContext(TableSheetContext);
+  if (!store) {
+    throw new Error('Missing VectorFsProvider');
+  }
+  const value = useStore(store, selector);
+  return value;
+}