@hanzo/ui 4.5.4 → 4.6.0

package/primitives/chat/sqlite-preview.tsx

@@ -0,0 +1,215 @@
+import { debug } from '@tauri-apps/plugin-log';
+import { useEffect, useState } from 'react';
+import * as sqljs from 'sql.js';
+
+import { Button } from '../button';
+import { Skeleton } from '../skeleton';
+
+interface SqlitePreviewProps {
+  url: string;
+}
+
+const loadTableData = async (
+  db: sqljs.Database,
+  tableName: string,
+): Promise<{ values: sqljs.SqlValue[][] }> => {
+  void debug(`loading table data for ${tableName}`);
+  const dataResult = db.exec(`SELECT * FROM ${tableName}`);
+  void debug(`found ${dataResult[0].values.length} rows for ${tableName}`);
+  return { values: dataResult[0].values };
+};
+
+const loadDatabase = async (
+  url: string,
+): Promise<{
+  db: sqljs.Database;
+  tables: { name: string; columns: sqljs.SqlValue[]; count: number }[];
+}> => {
+  void debug(`loading database from ${url}`);
+  const SQL = await sqljs.default({
+    locateFile: (file: string) => '/sqljs/sql-wasm.wasm',
+  });
+
+  const response = await fetch(url);
+  const arrayBuffer = await response.arrayBuffer();
+  const db = new SQL.Database(new Uint8Array(arrayBuffer));
+
+  // Get list of tables
+  const tablesResult = db.exec(
+    "SELECT name FROM sqlite_master WHERE type='table'",
+  );
+  const tableNames = tablesResult[0].values.map((v) => v[0] as string);
+  void debug(`found ${tableNames.length} tables`);
+  void debug(`tables: ${tableNames.join(', ')}`);
+  const tables = tableNames.map((table) => {
+    const columnsResult = db.exec(`PRAGMA table_info(${table})`);
+    const columnNames = columnsResult[0].values.map((v) => v[1]);
+    const countResult = db.exec(`SELECT COUNT(*) FROM ${table}`);
+    const count = countResult[0].values[0][0] as number;
+    void debug(
+      `found columns ${columnNames.join(', ')} and ${count} rows for ${table}`,
+    );
+    return {
+      name: table,
+      columns: columnNames,
+      count,
+    };
+  });
+
+  return { db, tables };
+};
+
+export const SqlitePreview: React.FC<SqlitePreviewProps> = ({ url }) => {
+  const [selectedTable, setSelectedTable] = useState<string>();
+  const [error, setError] = useState<string>();
+  const [loading, setLoading] = useState(true);
+  const [loadingData, setLoadingData] = useState(false);
+
+  const [db, setDb] = useState<sqljs.Database | null>(null);
+  const [tables, setTables] = useState<
+    { name: string; columns: sqljs.SqlValue[]; count: number }[]
+  >([]);
+  const [tableData, setTableData] = useState<{
+    columns: sqljs.SqlValue[];
+    rows: sqljs.SqlValue[][];
+  } | null>(null);
+
+  useEffect(() => {
+    const init = async () => {
+      setLoading(true);
+      try {
+        const { db, tables } = await loadDatabase(url);
+        setDb(db);
+        setTables(tables);
+        if (tables.length > 0) {
+          setSelectedTable(tables[0].name);
+        }
+      } catch (error) {
+        setError(
+          error instanceof Error ? error.message : 'Failed to load database',
+        );
+      } finally {
+        setLoading(false);
+      }
+    };
+    void init();
+  }, [url]);
+
+  useEffect(() => {
+    if (db && selectedTable) {
+      setLoadingData(true);
+      loadTableData(db, selectedTable)
+        .then(({ values }) => {
+          const columns = tables.find(
+            (table) => table.name === selectedTable,
+          )?.columns;
+          if (!columns) {
+            setError('Table not found');
+            return;
+          }
+          setTableData({
+            columns,
+            rows: values,
+          });
+        })
+        .catch((error) => {
+          setError(
+            error instanceof Error
+              ? error.message
+              : 'Failed to load table data',
+          );
+        })
+        .finally(() => {
+          setLoadingData(false);
+        });
+    }
+  }, [db, selectedTable, tables]);
+
+  useEffect(() => {
+    return () => {
+      if (db) {
+        void debug('closing database connection');
+        db.close();
+      }
+    };
+  }, [db]);
+
+  if (error) {
+    return (
+      <div className="p-4 text-red-500">Error loading database: {error}</div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="flex flex-col gap-4 rounded-lg bg-gray-600 p-4">
+        <div className="flex gap-2">
+          <Skeleton className="h-8 w-24" />
+          <Skeleton className="h-8 w-24" />
+        </div>
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-full" />
+          <Skeleton className="h-8 w-full" />
+          <Skeleton className="h-8 w-full" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4 overflow-y-hidden rounded-lg bg-gray-600 p-4">
+      <div className="flex flex-wrap gap-2">
+        {tables.map((table) => (
+          <Button
+            key={table.name}
+            onClick={() => setSelectedTable(table.name)}
+            size="sm"
+            variant={selectedTable === table.name ? 'default' : 'outline'}
+          >
+            {table.name} ({table.count})
+          </Button>
+        ))}
+      </div>
+
+      {selectedTable && (
+        <div className="max-h-full min-h-fit overflow-y-auto">
+          <div className="overflow-x-auto">
+            {loadingData ? (
+              <div className="space-y-2">
+                <Skeleton className="h-8 w-full" />
+                <Skeleton className="h-8 w-full" />
+                <Skeleton className="h-8 w-full" />
+              </div>
+            ) : (
+              <table className="w-full text-left text-sm">
+                <thead className="sticky top-0 bg-gray-600">
+                  <tr className="border-b border-gray-500">
+                    {tableData?.columns.map((column) => (
+                      <th
+                        className="p-2 font-medium text-gray-300"
+                        key={String(column)}
+                      >
+                        {String(column)}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {tableData?.rows.map((row, i) => (
+                    <tr className="border-b border-gray-700" key={i}>
+                      {row.map((cell, j) => (
+                        <td className="text-text-secondary p-2" key={j}>
+                          {String(cell)}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/primitives/checkbox.tsx

@@ -1,32 +1,31 @@
-'use client'
-import React from 'react'
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { Check } from 'lucide-react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from '@radix-ui/react-icons';
+import * as React from 'react';
 
-import { cn } from '../util'
+import { cn } from '../src/utils';
 
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
+type CheckboxProps = React.ComponentPropsWithoutRef<
+  typeof CheckboxPrimitive.Root
+> & {
+  ref?: React.RefObject<React.ComponentRef<typeof CheckboxPrimitive.Root>>;
+};
+
+const Checkbox = ({ className, ref, ...props }: CheckboxProps) => (
   <CheckboxPrimitive.Root
-    ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background ' + 
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ' + 
-      'focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ' + 
-      'data-[state=checked]:bg-primary data-[state=checked]:text-primary-fg',
-      className
+      'focus-visible:ring-ring data-[state=checked]:bg-brand data-[state=checked]:border-brand peer h-4 w-4 shrink-0 rounded-xs border border-gray-400 shadow-sm focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-black',
+      className,
     )}
+    ref={ref}
     {...props}
   >
     <CheckboxPrimitive.Indicator
       className={cn('flex items-center justify-center text-current')}
     >
-      <Check className='h-4 w-4' />
+      <CheckIcon className="h-3.5 w-3.5" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+);
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export default Checkbox
+export { Checkbox };

package/primitives/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/primitives/command.tsx

@@ -1,132 +1,124 @@
-"use client"
-import React from "react"
+import { DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
+import * as React from 'react';
 
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
+import { cn } from '../src/utils';
+import { Dialog, DialogContent } from './dialog';
 
-import { cn } from "../util"
-import { Dialog, DialogContent } from "./dialog"
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
+const Command = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) => (
   <CommandPrimitive
-    ref={ref}
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-level-1 text-foreground",
-      className
+      'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md [&_[cmdk-list]]:scroll-pt-0 [&_[cmdk-list]]:scroll-auto',
+      className,
     )}
+    loop={true}
     {...props}
   />
-))
-Command.displayName = CommandPrimitive.displayName
+);
+Command.displayName = CommandPrimitive.displayName;
 
-interface CommandDialogProps extends DialogProps {}
+type CommandDialogProps = DialogProps;
 
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-1 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:text-text-secondary [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
+const CommandInput = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) => (
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
-      ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        'placeholder:!text-text-placeholder flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+        className,
       )}
+      ref={ref}
       {...props}
     />
   </div>
-))
+);
 
-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = CommandPrimitive.Input.displayName;
 
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
+const CommandList = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) => (
   <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    className={cn(
+      'max-h-[300px] scroll-pt-0 overflow-x-hidden overflow-y-auto scroll-auto',
+      className,
+    )}
     {...props}
   />
-))
+);
 
-CommandList.displayName = CommandPrimitive.List.displayName
+CommandList.displayName = CommandPrimitive.List.displayName;
 
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
+const CommandEmpty = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) => (
+  <CommandPrimitive.Empty className="py-6 text-center text-sm" {...props} />
+);
 
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
+const CommandGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) => (
   <CommandPrimitive.Group
-    ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted",
-      className
+      'text-text-default [&_[cmdk-group-heading]]:text-text-default overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+      className,
     )}
     {...props}
   />
-))
+);
 
-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
+const CommandSeparator = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) => (
   <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
+    className={cn('bg-divider -mx-1 h-px', className)}
     {...props}
   />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+);
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
+const CommandItem = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) => (
   <CommandPrimitive.Item
-    ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
-      'data-selected:bg-level-3 aria-selected:text-accent',
-      'data-[disabled]:pointer-events-none data-[disabled]:opacity-35',
-      className
+      "hover:bg-bg-secondary data-[selected=true]:text-text-default data-[selected='true']:bg-bg-secondary relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      className,
     )}
     {...props}
   />
-))
+);
 
-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({
   className,
@@ -135,14 +127,14 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted",
-        className
+        'text-text-secondary ml-auto text-xs tracking-widest',
+        className,
       )}
       {...props}
     />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
+  );
+};
+CommandShortcut.displayName = 'CommandShortcut';
 
 export {
   Command,
@@ -154,4 +146,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+};