@docyrus/ui-pro-ai-assistant 0.0.1

package/src/components/work-canvas.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { useState } from 'react';
+
+import { FileText, Loader2 } from 'lucide-react';
+
+import { Button } from '@docyrus/ui-pro-shared/components/button';
+import { Card } from '@docyrus/ui-pro-shared/components/card';
+
+interface WorkCanvasProps {
+  id?: string;
+  title?: string;
+  description?: string;
+  content?: string;
+  state?: 'input-available' | 'input-streaming' | 'output-available' | string;
+  type?: string;
+  showUseButton?: boolean;
+  onOpen?: () => void;
+  onUseResult?: () => void;
+}
+
+export function WorkCanvas({
+  title,
+  description,
+  content,
+  state,
+  showUseButton = false,
+  type,
+  onOpen,
+  onUseResult
+}: WorkCanvasProps) {
+  const [showContent, setShowContent] = useState(true);
+
+  const handleClick = () => {
+    if (state === 'output-available') {
+      onOpen?.();
+    } else {
+      setShowContent(prev => !prev);
+    }
+  };
+
+  const isStreaming = state === 'input-streaming';
+  const showContentPreview
+    = content && (state === 'input-streaming' || state === 'input-available') && showContent;
+  const showUse = showUseButton && (type === 'view' || state === 'output-available');
+
+  return (
+    <div className="flex flex-row items-center space-x-4">
+      <Card
+        className="p-4 flex flex-col space-y-2 cursor-pointer w-fit min-w-80 max-w-96 shadow-sm hover:bg-accent/50 transition-colors"
+        onClick={handleClick}>
+        <div className="flex items-start space-x-2">
+          <div className="flex-none p-2 bg-slate-50 rounded">
+            <FileText className="size-8 text-muted-foreground" />
+          </div>
+          <div className="grow space-y-1 min-w-0">
+            {title && <div className="font-medium text-base truncate">{title}</div>}
+            {description && (
+              <p className="text-sm text-muted-foreground line-clamp-2">{description}</p>
+            )}
+          </div>
+        </div>
+
+        {showContentPreview && (
+          <div className="overflow-y-auto overflow-x-hidden max-h-48 w-full text-sm text-muted-foreground whitespace-pre-wrap break-words">
+            {content}
+          </div>
+        )}
+
+        {showUse && (
+          <Button
+            size="sm"
+            className="w-fit"
+            onClick={(e) => {
+              e.stopPropagation();
+              onUseResult?.();
+            }}>
+            Use Now
+          </Button>
+        )}
+      </Card>
+
+      {isStreaming && (
+        <Loader2 className="size-8 animate-spin text-primary flex-none" />
+      )}
+    </div>
+  );
+}

package/src/components/work-card.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { type FC } from 'react';
+
+import { Code } from 'lucide-react';
+
+import { type Work } from '../types';
+
+interface WorkCardProps {
+  work: Work;
+  onClick: () => void;
+  t: (key: string) => string;
+}
+
+export const WorkCard: FC<WorkCardProps> = ({ work, onClick, t }) => (
+  <div
+    className="w-full border border-border rounded-lg px-2 pb-2 flex flex-col gap-2.5 group cursor-pointer hover:shadow-lg"
+    onClick={onClick}>
+    <div className="h-32 rounded-xl overflow-hidden border-0.5 transition duration-300 border-border hover:border-muted-foreground relative">
+      {work.image_url ? (
+        <img
+          src={work.image_url}
+          alt={work.title}
+          className="w-full h-full object-cover rounded-xl" />
+      ) : (
+        <div className="h-32 mx-8 my-6 border-t border-l border-r border-border rounded-tl-xl rounded-tr-xl overflow-hidden select-none transition-all duration-300 translate-y-1 group-hover:translate-y-0 group-hover:shadow-lg">
+          <div className="flex items-center justify-center w-full h-full">
+            <Code className="w-12 h-12 text-muted-foreground" />
+          </div>
+        </div>
+      )}
+    </div>
+    <div className="space-y-0.5">
+      <div className="text-left text-sm truncate">{work.title}</div>
+      <div className="text-left text-xs text-muted-foreground truncate">
+        {work.created_on ? `${t('labels.last_edited')} ${new Date(work.created_on).toLocaleDateString()}` : t('labels.recently_created')}
+      </div>
+    </div>
+  </div>
+);
+
+WorkCard.displayName = 'WorkCard';

package/src/declarations.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />