windmill-components 1.558.3 → 1.596.0

package/package/components/copilot/chat/__tests__/app/initial/file_manager/frontend/components/Breadcrumb.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+interface BreadcrumbProps {
+	path: { id: string | null; name: string }[]
+	onNavigate: (folderId: string | null, folderName: string) => void
+}
+
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({ path, onNavigate }) => {
+	return (
+		<div className="px-4 py-2 bg-white border-b flex items-center gap-2 text-sm">
+			{path.map((item, index) => (
+				<React.Fragment key={item.id ?? 'root'}>
+					{index > 0 && <span className="text-gray-400">/</span>}
+					<button
+						onClick={() => onNavigate(item.id, item.name)}
+						className={`hover:text-blue-600 ${
+							index === path.length - 1 ? 'font-medium text-gray-900' : 'text-gray-600'
+						}`}
+					>
+						{item.name}
+					</button>
+				</React.Fragment>
+			))}
+		</div>
+	)
+}

package/package/components/copilot/chat/__tests__/app/initial/file_manager/frontend/components/FileItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { FileItem as FileItemType } from '../index';
+interface FileItemProps {
+    item: FileItemType;
+    onDelete: (item: FileItemType) => void;
+    onRename: (item: FileItemType, newName: string) => void;
+    onFolderOpen: (folder: FileItemType) => void;
+}
+export declare const FileItem: React.FC<FileItemProps>;
+export {};

package/package/components/copilot/chat/__tests__/app/initial/file_manager/frontend/components/FileItem.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react'
+import type { FileItem as FileItemType } from '../index'
+
+interface FileItemProps {
+	item: FileItemType
+	onDelete: (item: FileItemType) => void
+	onRename: (item: FileItemType, newName: string) => void
+	onFolderOpen: (folder: FileItemType) => void
+}
+
+export const FileItem: React.FC<FileItemProps> = ({ item, onDelete, onRename, onFolderOpen }) => {
+	const [isRenaming, setIsRenaming] = useState(false)
+	const [newName, setNewName] = useState(item.name)
+
+	const handleRename = () => {
+		if (newName.trim() && newName !== item.name) {
+			onRename(item, newName.trim())
+		}
+		setIsRenaming(false)
+	}
+
+	const handleDoubleClick = () => {
+		if (item.type === 'folder') {
+			onFolderOpen(item)
+		}
+	}
+
+	const icon = item.type === 'folder' ? '📁' : '📄'
+	const formattedDate = new Date(item.modifiedAt).toLocaleDateString()
+
+	return (
+		<div
+			className="grid grid-cols-12 gap-4 px-4 py-2 border-b hover:bg-gray-50 items-center"
+			onDoubleClick={handleDoubleClick}
+		>
+			<div className="col-span-6 flex items-center gap-2">
+				<span>{icon}</span>
+				{isRenaming ? (
+					<input
+						type="text"
+						value={newName}
+						onChange={(e) => setNewName(e.target.value)}
+						onBlur={handleRename}
+						onKeyDown={(e) => e.key === 'Enter' && handleRename()}
+						className="border rounded px-2 py-1 flex-1"
+						autoFocus
+					/>
+				) : (
+					<span
+						className={item.type === 'folder' ? 'cursor-pointer hover:text-blue-600' : ''}
+					>
+						{item.name}
+					</span>
+				)}
+			</div>
+
+			<div className="col-span-2 text-gray-500 text-sm">
+				{item.type === 'folder' ? 'Folder' : 'File'}
+			</div>
+
+			<div className="col-span-2 text-gray-500 text-sm">{formattedDate}</div>
+
+			<div className="col-span-2 flex gap-2">
+				<button
+					onClick={() => setIsRenaming(true)}
+					className="text-blue-500 hover:text-blue-700 text-sm"
+				>
+					Rename
+				</button>
+				<button
+					onClick={() => onDelete(item)}
+					className="text-red-500 hover:text-red-700 text-sm"
+				>
+					Delete
+				</button>
+			</div>
+		</div>
+	)
+}

package/package/components/copilot/chat/__tests__/app/initial/file_manager/frontend/components/FileList.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { FileItem } from '../index';
+interface FileListProps {
+    files: FileItem[];
+    onDelete: (item: FileItem) => void;
+    onRename: (item: FileItem, newName: string) => void;
+    onFolderOpen: (folder: FileItem) => void;
+}
+export declare const FileList: React.FC<FileListProps>;
+export {};

package/package/components/copilot/chat/__tests__/app/initial/file_manager/frontend/components/FileList.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { FileItem as FileItemComponent } from './FileItem'
+import type { FileItem } from '../index'
+
+interface FileListProps {
+	files: FileItem[]
+	onDelete: (item: FileItem) => void
+	onRename: (item: FileItem, newName: string) => void
+	onFolderOpen: (folder: FileItem) => void
+}
+
+export const FileList: React.FC<FileListProps> = ({ files, onDelete, onRename, onFolderOpen }) => {
+	if (files.length === 0) {
+		return (
+			<div className="text-center text-gray-500 py-8">This folder is empty</div>
+		)
+	}
+
+	// Sort: folders first, then files
+	const sortedFiles = [...files].sort((a, b) => {
+		if (a.type === 'folder' && b.type !== 'folder') return -1
+		if (a.type !== 'folder' && b.type === 'folder') return 1
+		return a.name.localeCompare(b.name)
+	})
+
+	return (
+		<div className="bg-white rounded-lg border">
+			<div className="grid grid-cols-12 gap-4 px-4 py-2 border-b bg-gray-50 font-medium text-sm text-gray-600">
+				<div className="col-span-6">Name</div>
+				<div className="col-span-2">Type</div>
+				<div className="col-span-2">Modified</div>
+				<div className="col-span-2">Actions</div>
+			</div>
+
+			{sortedFiles.map((file) => (
+				<FileItemComponent
+					key={file.id}
+					item={file}
+					onDelete={onDelete}
+					onRename={onRename}
+					onFolderOpen={onFolderOpen}
+				/>
+			))}
+		</div>
+	)
+}

package/package/components/copilot/chat/__tests__/app/initial/file_manager/frontend/components/FolderTree.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { Folder } from '../index';
+interface FolderTreeProps {
+    folders: Folder[];
+    currentFolderId: string | null;
+    onFolderSelect: (folderId: string | null, folderName: string) => void;
+    depth?: number;
+}
+export declare const FolderTree: React.FC<FolderTreeProps>;
+export {};

package/package/components/copilot/chat/__tests__/app/initial/file_manager/frontend/components/FolderTree.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import type { Folder } from '../index'
+
+interface FolderTreeProps {
+	folders: Folder[]
+	currentFolderId: string | null
+	onFolderSelect: (folderId: string | null, folderName: string) => void
+	depth?: number
+}
+
+export const FolderTree: React.FC<FolderTreeProps> = ({
+	folders,
+	currentFolderId,
+	onFolderSelect,
+	depth = 0
+}) => {
+	return (
+		<div>
+			{depth === 0 && (
+				<div
+					className={`px-4 py-2 cursor-pointer hover:bg-gray-100 ${
+						currentFolderId === null ? 'bg-blue-100 text-blue-700' : ''
+					}`}
+					onClick={() => onFolderSelect(null, 'Root')}
+				>
+					<span className="mr-2">📁</span>
+					Root
+				</div>
+			)}
+
+			{folders.map((folder) => (
+				<div key={folder.id}>
+					<div
+						className={`px-4 py-2 cursor-pointer hover:bg-gray-100 ${
+							currentFolderId === folder.id ? 'bg-blue-100 text-blue-700' : ''
+						}`}
+						style={{ paddingLeft: `${(depth + 1) * 16 + 16}px` }}
+						onClick={() => onFolderSelect(folder.id, folder.name)}
+					>
+						<span className="mr-2">📁</span>
+						{folder.name}
+					</div>
+
+					{folder.children && folder.children.length > 0 && (
+						<FolderTree
+							folders={folder.children}
+							currentFolderId={currentFolderId}
+							onFolderSelect={onFolderSelect}
+							depth={depth + 1}
+						/>
+					)}
+				</div>
+			))}
+		</div>
+	)
+}

package/package/components/copilot/chat/__tests__/app/initial/file_manager/frontend/components/Toolbar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ToolbarProps {
+    onCreateFolder: (name: string) => void;
+}
+export declare const Toolbar: React.FC<ToolbarProps>;
+export {};

package/package/components/copilot/chat/__tests__/app/initial/file_manager/frontend/components/Toolbar.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react'
+
+interface ToolbarProps {
+	onCreateFolder: (name: string) => void
+}
+
+export const Toolbar: React.FC<ToolbarProps> = ({ onCreateFolder }) => {
+	const [isCreating, setIsCreating] = useState(false)
+	const [folderName, setFolderName] = useState('')
+
+	const handleCreate = () => {
+		if (folderName.trim()) {
+			onCreateFolder(folderName.trim())
+			setFolderName('')
+			setIsCreating(false)
+		}
+	}
+
+	return (
+		<div className="px-4 py-3 bg-white border-b flex items-center gap-4">
+			{isCreating ? (
+				<div className="flex items-center gap-2">
+					<input
+						type="text"
+						value={folderName}
+						onChange={(e) => setFolderName(e.target.value)}
+						onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
+						placeholder="Folder name"
+						className="border rounded px-3 py-1"
+						autoFocus
+					/>
+					<button
+						onClick={handleCreate}
+						className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600"
+					>
+						Create
+					</button>
+					<button
+						onClick={() => {
+							setIsCreating(false)
+							setFolderName('')
+						}}
+						className="px-3 py-1 text-gray-600 hover:text-gray-800"
+					>
+						Cancel
+					</button>
+				</div>
+			) : (
+				<button
+					onClick={() => setIsCreating(true)}
+					className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 flex items-center gap-2"
+				>
+					<span>+</span>
+					New Folder
+				</button>
+			)}
+		</div>
+	)
+}

package/package/components/copilot/chat/__tests__/app/initial/file_manager/frontend/index.d.ts

@@ -0,0 +1,16 @@
+export interface FileItem {
+    id: string;
+    name: string;
+    type: 'file' | 'folder';
+    size?: number;
+    modifiedAt: string;
+    parentId: string | null;
+}
+export interface Folder {
+    id: string;
+    name: string;
+    parentId: string | null;
+    children: Folder[];
+}
+declare const App: () => any;
+export default App;

package/package/components/copilot/chat/__tests__/app/initial/file_manager/frontend/index.tsx

@@ -0,0 +1,119 @@
+import React, { useState, useEffect } from 'react'
+import { backend } from 'wmill'
+import { FolderTree } from './components/FolderTree'
+import { FileList } from './components/FileList'
+import { Breadcrumb } from './components/Breadcrumb'
+import { Toolbar } from './components/Toolbar'
+
+export interface FileItem {
+	id: string
+	name: string
+	type: 'file' | 'folder'
+	size?: number
+	modifiedAt: string
+	parentId: string | null
+}
+
+export interface Folder {
+	id: string
+	name: string
+	parentId: string | null
+	children: Folder[]
+}
+
+const App = () => {
+	const [folders, setFolders] = useState<Folder[]>([])
+	const [files, setFiles] = useState<FileItem[]>([])
+	const [currentFolderId, setCurrentFolderId] = useState<string | null>(null)
+	const [path, setPath] = useState<{ id: string | null; name: string }[]>([
+		{ id: null, name: 'Root' }
+	])
+	const [loading, setLoading] = useState(true)
+
+	useEffect(() => {
+		loadFolders()
+	}, [])
+
+	useEffect(() => {
+		loadFiles(currentFolderId)
+	}, [currentFolderId])
+
+	const loadFolders = async () => {
+		const data = await backend.listFolders()
+		setFolders(data)
+	}
+
+	const loadFiles = async (folderId: string | null) => {
+		setLoading(true)
+		const data = await backend.listFiles({ folderId })
+		setFiles(data)
+		setLoading(false)
+	}
+
+	const handleFolderSelect = (folderId: string | null, folderName: string) => {
+		setCurrentFolderId(folderId)
+
+		if (folderId === null) {
+			setPath([{ id: null, name: 'Root' }])
+		} else {
+			// Find if folder is already in path
+			const existingIndex = path.findIndex((p) => p.id === folderId)
+			if (existingIndex >= 0) {
+				setPath(path.slice(0, existingIndex + 1))
+			} else {
+				setPath([...path, { id: folderId, name: folderName }])
+			}
+		}
+	}
+
+	const handleCreateFolder = async (name: string) => {
+		await backend.createFolder({ name, parentId: currentFolderId })
+		await loadFolders()
+		await loadFiles(currentFolderId)
+	}
+
+	const handleDeleteItem = async (item: FileItem) => {
+		await backend.deleteItem({ id: item.id, type: item.type })
+		await loadFolders()
+		await loadFiles(currentFolderId)
+	}
+
+	const handleRenameItem = async (item: FileItem, newName: string) => {
+		await backend.renameItem({ id: item.id, type: item.type, newName })
+		await loadFolders()
+		await loadFiles(currentFolderId)
+	}
+
+	return (
+		<div className="flex h-screen bg-gray-100">
+			<div className="w-64 bg-white border-r overflow-auto">
+				<div className="p-4 font-semibold border-b">Folders</div>
+				<FolderTree
+					folders={folders}
+					currentFolderId={currentFolderId}
+					onFolderSelect={handleFolderSelect}
+				/>
+			</div>
+
+			<div className="flex-1 flex flex-col">
+				<Toolbar onCreateFolder={handleCreateFolder} />
+				<Breadcrumb path={path} onNavigate={handleFolderSelect} />
+
+				<div className="flex-1 p-4 overflow-auto">
+					{loading ? (
+						<div className="text-center text-gray-500 py-8">Loading...</div>
+					) : (
+						<FileList
+							files={files}
+							onDelete={handleDeleteItem}
+							onRename={handleRenameItem}
+							onFolderOpen={(folder) => handleFolderSelect(folder.id, folder.name)}
+						/>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default App

package/package/components/copilot/chat/__tests__/app/initial/shopping_cart/backend/addToCart/main.d.ts

@@ -0,0 +1,15 @@
+interface Product {
+    id: string;
+    name: string;
+    price: number;
+    image: string;
+}
+interface CartItem {
+    product: Product;
+    quantity: number;
+}
+export declare function main({ cart, product }: {
+    cart: CartItem[];
+    product: Product;
+}): Promise<CartItem[]>;
+export {};

package/package/components/copilot/chat/__tests__/app/initial/shopping_cart/backend/addToCart/main.js

@@ -0,0 +1,14 @@
+export async function main({ cart, product }) {
+    const existingIndex = cart.findIndex((item) => item.product.id === product.id);
+    if (existingIndex >= 0) {
+        // Increment quantity if already in cart
+        const updatedCart = [...cart];
+        updatedCart[existingIndex] = {
+            ...updatedCart[existingIndex],
+            quantity: updatedCart[existingIndex].quantity + 1
+        };
+        return updatedCart;
+    }
+    // Add new item to cart
+    return [...cart, { product, quantity: 1 }];
+}

package/package/components/copilot/chat/__tests__/app/initial/shopping_cart/backend/addToCart/meta.json

@@ -0,0 +1,4 @@
+{
+	"name": "Add to Cart",
+	"language": "bun"
+}

package/package/components/copilot/chat/__tests__/app/initial/shopping_cart/backend/calculateTotal/main.d.ts

@@ -0,0 +1,14 @@
+interface Product {
+    id: string;
+    name: string;
+    price: number;
+    image: string;
+}
+interface CartItem {
+    product: Product;
+    quantity: number;
+}
+export declare function main({ items }: {
+    items: CartItem[];
+}): Promise<number>;
+export {};

package/package/components/copilot/chat/__tests__/app/initial/shopping_cart/backend/calculateTotal/main.js

@@ -0,0 +1,5 @@
+export async function main({ items }) {
+    return items.reduce((total, item) => {
+        return total + item.product.price * item.quantity;
+    }, 0);
+}

package/package/components/copilot/chat/__tests__/app/initial/shopping_cart/backend/calculateTotal/meta.json

@@ -0,0 +1,4 @@
+{
+	"name": "Calculate Total",
+	"language": "bun"
+}

package/package/components/copilot/chat/__tests__/app/initial/shopping_cart/backend/getProducts/main.d.ts

@@ -0,0 +1,6 @@
+export declare function main(): Promise<{
+    id: string;
+    name: string;
+    price: number;
+    image: string;
+}[]>;

package/package/components/copilot/chat/__tests__/app/initial/shopping_cart/backend/getProducts/main.js

@@ -0,0 +1,41 @@
+export async function main() {
+    // Mock product catalog
+    return [
+        {
+            id: '1',
+            name: 'Wireless Headphones',
+            price: 79.99,
+            image: 'https://picsum.photos/seed/headphones/300/200'
+        },
+        {
+            id: '2',
+            name: 'Smart Watch',
+            price: 199.99,
+            image: 'https://picsum.photos/seed/watch/300/200'
+        },
+        {
+            id: '3',
+            name: 'Laptop Stand',
+            price: 49.99,
+            image: 'https://picsum.photos/seed/stand/300/200'
+        },
+        {
+            id: '4',
+            name: 'Mechanical Keyboard',
+            price: 129.99,
+            image: 'https://picsum.photos/seed/keyboard/300/200'
+        },
+        {
+            id: '5',
+            name: 'USB-C Hub',
+            price: 39.99,
+            image: 'https://picsum.photos/seed/hub/300/200'
+        },
+        {
+            id: '6',
+            name: 'Webcam HD',
+            price: 89.99,
+            image: 'https://picsum.photos/seed/webcam/300/200'
+        }
+    ];
+}

package/package/components/copilot/chat/__tests__/app/initial/shopping_cart/backend/getProducts/meta.json

@@ -0,0 +1,4 @@
+{
+	"name": "Get Products",
+	"language": "bun"
+}

package/package/components/copilot/chat/__tests__/app/initial/shopping_cart/backend/removeFromCart/main.d.ts

@@ -0,0 +1,15 @@
+interface Product {
+    id: string;
+    name: string;
+    price: number;
+    image: string;
+}
+interface CartItem {
+    product: Product;
+    quantity: number;
+}
+export declare function main({ cart, productId }: {
+    cart: CartItem[];
+    productId: string;
+}): Promise<CartItem[]>;
+export {};

package/package/components/copilot/chat/__tests__/app/initial/shopping_cart/backend/removeFromCart/main.js

@@ -0,0 +1,3 @@
+export async function main({ cart, productId }) {
+    return cart.filter((item) => item.product.id !== productId);
+}

package/package/components/copilot/chat/__tests__/app/initial/shopping_cart/backend/removeFromCart/meta.json

@@ -0,0 +1,4 @@
+{
+	"name": "Remove from Cart",
+	"language": "bun"
+}

package/package/components/copilot/chat/__tests__/app/initial/shopping_cart/frontend/components/Cart.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { CartItem } from '../index';
+interface CartProps {
+    items: CartItem[];
+    total: number;
+    onRemoveItem: (productId: string) => void;
+}
+export declare const Cart: React.FC<CartProps>;
+export {};

package/package/components/copilot/chat/__tests__/app/initial/shopping_cart/frontend/components/Cart.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import type { CartItem } from '../index'
+
+interface CartProps {
+	items: CartItem[]
+	total: number
+	onRemoveItem: (productId: string) => void
+}
+
+export const Cart: React.FC<CartProps> = ({ items, total, onRemoveItem }) => {
+	return (
+		<div className="flex flex-col h-full">
+			<h2 className="text-xl font-bold mb-4">Cart</h2>
+
+			{items.length === 0 ? (
+				<p className="text-gray-500 text-center py-8">Your cart is empty</p>
+			) : (
+				<>
+					<div className="flex-1 overflow-auto">
+						{items.map((item) => (
+							<div
+								key={item.product.id}
+								className="flex items-center justify-between py-3 border-b"
+							>
+								<div className="flex-1">
+									<p className="font-medium">{item.product.name}</p>
+									<p className="text-sm text-gray-500">
+										${item.product.price.toFixed(2)} x {item.quantity}
+									</p>
+								</div>
+								<button
+									onClick={() => onRemoveItem(item.product.id)}
+									className="text-red-500 hover:text-red-700 px-2"
+								>
+									Remove
+								</button>
+							</div>
+						))}
+					</div>
+
+					<div className="border-t pt-4 mt-4">
+						<div className="flex justify-between text-lg font-bold">
+							<span>Total:</span>
+							<span>${total.toFixed(2)}</span>
+						</div>
+					</div>
+				</>
+			)}
+		</div>
+	)
+}

package/package/components/copilot/chat/__tests__/app/initial/shopping_cart/frontend/components/ProductCard.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Product } from '../index';
+interface ProductCardProps {
+    product: Product;
+    onAddToCart: (product: Product) => void;
+}
+export declare const ProductCard: React.FC<ProductCardProps>;
+export {};