@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.5

package/src/views/projects-panel.tsx

@@ -1,131 +0,0 @@
-'use client';
-
-import { type FC } from 'react';
-
-import { Button } from '@docyrus/ui-pro-shared/components/button';
-import { Input } from '@docyrus/ui-pro-shared/components/input';
-import {
-  Eye, Pencil, Plus, Search, Trash2
-} from 'lucide-react';
-
-import { type Project } from '../types';
-
-interface ProjectsPanelProps {
-  projects: Project[];
-  searchQuery: string;
-  onSearchChange: (query: string) => void;
-  onNewProject: () => void;
-  onProjectClick: (project: Project) => void;
-  onEditProject: (project: Project) => void;
-  onDeleteProject: (project: Project) => void;
-  compact?: boolean;
-  t: (key: string, params?: Record<string, string>) => string;
-}
-
-export const AssistantProjectsPanel: FC<ProjectsPanelProps> = ({
-  projects,
-  searchQuery,
-  onSearchChange,
-  onNewProject,
-  onProjectClick,
-  onEditProject,
-  onDeleteProject,
-  compact = false,
-  t
-}) => {
-  const filtered = projects.filter((p) => {
-    if (!searchQuery.trim()) return true;
-    const q = searchQuery.toLowerCase();
-
-    return (
-      p.name.toLowerCase().includes(q)
-      || (p.description && p.description.toLowerCase().includes(q))
-    );
-  });
-
-  return (
-    <div className={`flex-1 flex flex-col overflow-y-auto ${compact ? 'p-3' : 'p-6'}`}>
-      {/* Header */}
-      <div className={`flex items-center justify-between ${compact ? 'mb-3' : 'mb-6'}`}>
-        <div className="flex flex-col min-w-0">
-          <h1 className={`font-semibold ps-2 truncate ${compact ? 'text-base' : 'text-2xl'}`}>{t('sections.projects')}</h1>
-          {!compact && <div className="text-sm text-muted-foreground ps-2">{t('descriptions.manage_projects')}</div>}
-        </div>
-        <Button size="sm" onClick={onNewProject} className="shrink-0">
-          <Plus className="w-4 h-4" />
-          {!compact && t('buttons.new_project')}
-        </Button>
-      </div>
-
-      {/* Search */}
-      <div className={`flex items-center gap-4 ${compact ? 'mb-3' : 'mb-6'}`}>
-        <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground w-4 h-4" />
-          <Input
-            type="text"
-            placeholder={t('placeholders.search_projects')}
-            value={searchQuery}
-            onChange={e => onSearchChange(e.target.value)}
-            className="pl-10 pr-4 py-2 w-full border border-border rounded-lg focus:outline-none" />
-        </div>
-      </div>
-
-      {/* Grid */}
-      {projects.length > 0 ? (
-        filtered.length > 0 ? (
-          <div className={`grid gap-3 ${compact ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2'}`}>
-            {filtered.map(project => (
-              <div
-                key={project.id}
-                className={`bg-card border border-border rounded-lg hover:shadow-md transition-shadow flex flex-col gap-2 ${compact ? 'p-3' : 'p-4 gap-3'}`}>
-                <div className="flex flex-col flex-1 min-w-0">
-                  <h3 className="font-medium text-card-foreground line-clamp-2">{project.name}</h3>
-                  {project.description && (
-                    <p className="text-sm text-muted-foreground line-clamp-2 mt-1">{project.description}</p>
-                  )}
-                </div>
-                <div className="flex items-center gap-1 border-t pt-2">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-7 px-2 text-xs text-primary hover:text-primary/80 hover:bg-primary/10"
-                    onClick={() => onProjectClick(project)}>
-                    <Eye className="w-3.5 h-3.5" />
-                    {t('common.view')}
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-7 px-2 text-xs text-primary hover:text-primary/80 hover:bg-primary/10"
-                    onClick={() => onEditProject(project)}>
-                    <Pencil className="w-3.5 h-3.5" />
-                    {t('common.edit')}
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-7 w-7 ml-auto text-rose-500 hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950"
-                    onClick={() => onDeleteProject(project)}>
-                    <Trash2 className="w-3.5 h-3.5" />
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <div className="flex flex-col items-center justify-center flex-1 p-8 text-center">
-            <p className="text-muted-foreground">
-              {t('messages.no_projects_found', { query: searchQuery })}
-            </p>
-          </div>
-        )
-      ) : (
-        <div className="flex flex-col items-center justify-center flex-1 p-8 text-center">
-          <p className="text-muted-foreground">{t('messages.no_projects_yet')}</p>
-        </div>
-      )}
-    </div>
-  );
-};
-
-AssistantProjectsPanel.displayName = 'AssistantProjectsPanel';

package/src/views/sessions-list.tsx

@@ -1,98 +0,0 @@
-'use client';
-
-import { type FC } from 'react';
-
-import { Button } from '@docyrus/ui-pro-shared/components/button';
-import { Input } from '@docyrus/ui-pro-shared/components/input';
-import { Plus, Search } from 'lucide-react';
-
-import { ListItemCard } from '../components/list-item-card';
-import { type AssistantSession } from '../types';
-
-interface SessionsListViewProps {
-  sessions: AssistantSession[];
-  filteredSessions: AssistantSession[];
-  searchQuery: string;
-  onSearchChange: (query: string) => void;
-  onNewSession: () => void;
-  onSessionClick: (session: AssistantSession) => void;
-  onEditSession: (session: AssistantSession) => void;
-  onDeleteSession: (session: AssistantSession) => void;
-  t: (key: string, params?: Record<string, string>) => string;
-}
-
-export const SessionsListView: FC<SessionsListViewProps> = ({
-  sessions,
-  filteredSessions,
-  searchQuery,
-  onSearchChange,
-  onNewSession,
-  onSessionClick,
-  onEditSession,
-  onDeleteSession,
-  t
-}) => {
-  return (
-    <div className="flex-1 flex flex-col overflow-y-auto p-6">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex flex-col min-w-0">
-          <h1 className="text-2xl font-semibold ps-2">{t('tabs.sessions')}</h1>
-        </div>
-        <Button size="sm" onClick={onNewSession} className="shrink-0">
-          <Plus className="w-4 h-4" />
-          {t('buttons.new_session')}
-        </Button>
-      </div>
-
-      {/* Search */}
-      <div className="flex items-center gap-4 mb-6">
-        <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground w-4 h-4" />
-          <Input
-            type="text"
-            placeholder={t('placeholders.search_sessions')}
-            value={searchQuery}
-            onChange={e => onSearchChange(e.target.value)}
-            className="pl-10 pr-4 py-2 w-full border border-border rounded-lg focus:outline-none" />
-        </div>
-      </div>
-
-      {/* Sessions List */}
-      {sessions && sessions.length > 0 ? (
-        filteredSessions.length > 0 ? (
-          <div className="flex flex-col gap-3">
-            {filteredSessions.map((session: AssistantSession) => (
-              <ListItemCard
-                key={session.id}
-                title={session.title}
-                subtitle={`${t('labels.last_activity')} ${session.updatedAt.toLocaleDateString()} at ${session.updatedAt.toLocaleTimeString()}`}
-                onClick={() => onSessionClick(session)}
-                actions={[
-                  {
-                    label: t('common.rename'),
-                    onClick: () => onEditSession(session)
-                  },
-                  {
-                    label: t('common.delete'),
-                    variant: 'destructive',
-                    onClick: () => onDeleteSession(session)
-                  }
-                ]} />
-            ))}
-          </div>
-        ) : (
-          <div className="flex flex-col items-center justify-center h-full p-8 text-center">
-            <p className="text-muted-foreground">{t('messages.no_sessions_found', { query: searchQuery })}</p>
-          </div>
-        )
-      ) : (
-        <div className="flex flex-col items-center justify-center h-full p-8 text-center">
-          <p className="text-muted-foreground">{t('messages.no_sessions_yet')}</p>
-        </div>
-      )}
-    </div>
-  );
-};
-
-SessionsListView.displayName = 'SessionsListView';

package/src/views/sidebar-content.tsx

@@ -1,256 +0,0 @@
-'use client';
-
-import { useState, type ElementType, type FC } from 'react';
-
-import { Button } from '@docyrus/ui-pro-shared/components/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger
-} from '@docyrus/ui-pro-shared/components/dropdown-menu';
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-import {
-  CirclePlus, MessageSquare, MoreVertical, NotebookText, Plus, RefreshCcw, Trash
-} from 'lucide-react';
-
-import { type AssistantSession, type Project, type Work } from '../types';
-
-function NavButton({
-  label,
-  icon: Icon,
-  isActive,
-  onClick,
-  closeSidebar
-}: {
-  label: string;
-  icon: ElementType;
-  isActive: boolean;
-  onClick: () => void;
-  closeSidebar?: () => void;
-}) {
-  return (
-    <Button
-      variant="ghost"
-      onClick={() => {
-        onClick();
-        closeSidebar?.();
-      }}
-      className={cn(
-        'h-9 px-4 py-2 rounded-lg w-full justify-start overflow-hidden',
-        isActive && 'bg-muted text-foreground'
-      )}
-      aria-label={label}>
-      <div className="-translate-x-2 w-full flex flex-row items-center justify-start gap-3">
-        <div className="size-4 flex items-center justify-center">
-          <Icon className="shrink-0 text-muted-foreground w-4 h-4" />
-        </div>
-        <span className="truncate text-sm">{label}</span>
-      </div>
-    </Button>
-  );
-}
-
-interface SidebarContentProps {
-  sessions: AssistantSession[];
-  works: Work[];
-  projects: Project[];
-  selectedSessionId: string | null;
-  selectedWorkId?: string | null;
-  activeTab: number;
-  onNewChat: () => void;
-  onTabChange: (tabId: number) => void;
-  onSessionClick: (session: AssistantSession) => void;
-  onDeleteSession?: (session: AssistantSession) => void;
-  onWorkClick: (work: Work) => void;
-  onProjectClick: (project: Project) => void;
-  onShowMoreProjects: () => void;
-  onNewProject?: () => void;
-  onToggleSidebar?: () => void;
-  t: (key: string) => string;
-}
-
-export const SidebarContent: FC<SidebarContentProps> = ({
-  sessions,
-  works,
-  projects,
-  selectedSessionId,
-  selectedWorkId,
-  activeTab,
-  onNewChat,
-  onTabChange,
-  onSessionClick,
-  onDeleteSession,
-  onWorkClick,
-  onProjectClick,
-  onShowMoreProjects,
-  onNewProject,
-  onToggleSidebar,
-  t
-}) => {
-  // Local state for recent list type
-  const [activeListType, setActiveListType] = useState<'sessions' | 'works'>('sessions');
-
-  // Navigation items
-  const navItems = [{ id: 1, label: t('tabs.sessions'), icon: MessageSquare }, { id: 3, label: t('tabs.works'), icon: NotebookText }];
-
-  return (
-    <div className="flex flex-col flex-1 min-h-0">
-      {/* Navigation */}
-      <div className="flex flex-col gap-px">
-        {/* New Session Button */}
-        <Button
-          variant="ghost"
-          onClick={onNewChat}
-          className="h-9 px-4 py-2 rounded-lg w-full justify-start"
-          aria-label="New chat">
-          <div className="-translate-x-2 w-full flex flex-row items-center justify-start gap-3">
-            <div className="size-4 flex items-center justify-center">
-              <CirclePlus className="shrink-0 text-muted-foreground w-4 h-4" />
-            </div>
-            <span className="truncate text-sm">{t('buttons.new_chat')}</span>
-          </div>
-        </Button>
-
-        {/* Navigation Items */}
-        {navItems.map(item => (
-          <NavButton
-            key={item.id}
-            label={item.label}
-            icon={item.icon}
-            isActive={activeTab === item.id}
-            onClick={() => onTabChange(item.id)}
-            closeSidebar={onToggleSidebar} />
-        ))}
-      </div>
-
-      <div className="flex-1 flex flex-col overflow-hidden">
-        {/* Projects */}
-        <div className="mt-4">
-          <div className="px-2 bg-card/40 rounded-md flex items-center justify-between">
-            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-              {t('sections.projects')}
-            </span>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={onNewProject}
-              className="h-6 w-6 text-muted-foreground hover:text-foreground"
-              aria-label="New project">
-              <Plus className="w-3.5 h-3.5" />
-            </Button>
-          </div>
-          {projects.slice(0, 3).map(project => (
-            <div
-              key={project.id}
-              onClick={() => onProjectClick(project)}
-              className={cn(
-                'px-2 py-1 rounded-lg cursor-pointer transition-colors',
-                'hover:bg-accent hover:text-accent-foreground'
-              )}>
-              <div className="text-sm truncate">{project.name}</div>
-              <div className="text-xs text-muted-foreground truncate">
-                {project.description || t('common.no_description')}
-              </div>
-            </div>
-          ))}
-          <Button
-            variant="ghost"
-            onClick={onShowMoreProjects}
-            className="w-full px-2 h-7 text-primary text-xs justify-start hover:text-primary/80">
-            {t('buttons.show_more')}
-          </Button>
-        </div>
-
-        {/* Recents */}
-        <div className="flex flex-col mt-4 flex-1 min-h-0">
-          {/* Tab Selector */}
-          <div className="flex items-center justify-between px-2 bg-card/40 rounded-md shrink-0">
-            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-              {t('sections.recents')}
-            </span>
-            <div className="relative group">
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-6 cursor-pointer px-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground"
-                onClick={() => setActiveListType(activeListType === 'sessions' ? 'works' : 'sessions')}>
-                {activeListType === 'sessions' ? `${t('tabs.sessions')} (${sessions.length})` : `${t('tabs.works')} (${works.length})`}
-                <RefreshCcw className="ml-1 w-3 h-3" />
-              </Button>
-            </div>
-          </div>
-
-          {/* List Content */}
-          <div
-            className="flex-1 overflow-y-auto"
-            style={{
-              scrollbarWidth: 'thin',
-              scrollbarColor: 'var(--muted-foreground) transparent'
-            }}>
-            <div className="pr-1">
-              {activeListType === 'sessions' ? (
-                // Sessions List
-                sessions.map(session => (
-                  <div
-                    key={session.id}
-                    onClick={() => onSessionClick(session)}
-                    className={cn(
-                      'group relative px-2 py-1 rounded-lg cursor-pointer transition-colors',
-                      'hover:bg-accent hover:text-accent-foreground',
-                      selectedSessionId === session.id && 'bg-accent text-accent-foreground'
-                    )}>
-                    <div className="text-sm truncate pr-6">{session.title}</div>
-                    <div className="text-xs text-muted-foreground">
-                      {session.updatedAt.toLocaleDateString()}
-                    </div>
-                    {onDeleteSession && (
-                      <div
-                        className="absolute right-1 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity"
-                        onClick={e => e.stopPropagation()}>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" size="icon" className="h-6 w-6 text-muted-foreground hover:text-foreground">
-                              <MoreVertical className="w-3.5 h-3.5" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end" className="w-36 z-[9999]">
-                            <DropdownMenuItem
-                              className="text-destructive focus:text-destructive cursor-pointer"
-                              onClick={() => onDeleteSession(session)}>
-                              <Trash className="w-3.5 h-3.5 mr-2" />
-                              {t('common.delete')}
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-                    )}
-                  </div>
-                ))
-              ) : (
-                // Works List
-                works.map(work => (
-                  <div
-                    key={work.id}
-                    onClick={() => onWorkClick(work)}
-                    className={cn(
-                      'p-2 rounded-lg cursor-pointer transition-colors',
-                      'hover:bg-accent hover:text-accent-foreground',
-                      selectedWorkId === work.id && 'bg-accent text-accent-foreground'
-                    )}>
-                    <div className="text-sm truncate">{work.title}</div>
-                    <div className="text-xs text-muted-foreground truncate">
-                      {work.content_text?.substring(0, 50) || 'No content'}
-                    </div>
-                  </div>
-                ))
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-SidebarContent.displayName = 'SidebarContent';

package/src/views/work-detail.tsx

@@ -1,98 +0,0 @@
-import { type FC } from 'react';
-
-import { Avatar } from '@docyrus/ui-pro-shared/components/avatar';
-import { Button } from '@docyrus/ui-pro-shared/components/button';
-import { ArrowLeft, RefreshCcw } from 'lucide-react';
-
-import { type Work } from '../types';
-
-interface AssistantWorkDetailViewProps {
-  work: Work | null;
-  onClose: () => void;
-  onBack?: () => void;
-}
-
-export const AssistantWorkDetailView: FC<AssistantWorkDetailViewProps> = ({ work, onBack }) => {
-  if (!work) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <div className="text-center text-muted-foreground">
-          <p>No work selected</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex-1 flex flex-col p-6 mt-12 mx-2 h-screen overflow-y-auto">
-      {/* Header with Back Button */}
-      <div className="flex items-center gap-2 mb-6">
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={onBack}
-          className="text-muted-foreground cursor-pointer hover:text-foreground">
-          <ArrowLeft className="w-5 h-5" />
-        </Button>
-      </div>
-
-      {/* Work Details */}
-      <div className="flex items-center gap-2 mb-2">
-        <Avatar className="w-8 h-8 rounded-full bg-muted flex items-center justify-center">
-          <span className="text-lg font-medium text-foreground">
-            {work.title.charAt(0).toUpperCase()} {/* When created update it to publisher avatar */}
-          </span>
-        </Avatar>
-        <div className="text-sm text-muted-foreground mt-1">Created by: Unknown</div>
-      </div>
-      <div className="ms-1">
-        <h2 className="text-lg font-semibold">{work.title}</h2>
-
-        <div className="mt-1 text-sm text-muted-foreground whitespace-pre-wrap">
-          {work.description || 'No description provided.'}
-        </div>
-      </div>
-
-      {/* Content Card */}
-      <div className="mt-6 bg-secondary rounded-xl w-full min-h-96 p-0">
-        <div className="flex justify-end text-sm border w-full items-center rounded-t-xl border-b bg-card h-8 p-0 m-0">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8 p-0 right-0 text-muted-foreground cursor-default hover:bg-transparent hover:text-muted-foreground">
-            <RefreshCcw className="w-4 h-4" />
-          </Button>
-        </div>
-      </div>
-
-      {/* Metadata Section */}
-      <div className="grid grid-cols-2 gap-6 flex-1 py-4">
-        <div className="py-2 flex flex-col">
-          <h3 className="font-medium mb-2">About</h3>
-
-          <div className="p-8 h-48 bg-muted rounded-xl overflow-auto">
-            <h4 className="font-medium mb-2">Starting prompt</h4>
-            <p className="whitespace-pre-wrap text-sm">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem sunt nemo quas optio qui. Quasi sit ex
-              perferendis quisquam nesciunt! Consequuntur eveniet suscipit nam impedit voluptatem delectus eaque sint
-              voluptates?
-            </p>
-          </div>
-        </div>
-        <div className="ms-10">
-          <h3 className="font-medium mb-2">Keep Learning</h3>
-          <div className="flex flex-col gap-2 w-32">
-            <Button variant="outline" size="sm" className="h-10">
-              View full chat
-            </Button>
-            <Button variant="outline" size="sm" className="h-10">
-              Artifacts Guide
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AssistantWorkDetailView;

package/src/vite.ts

@@ -1,64 +0,0 @@
-import { type IncomingMessage } from 'node:http';
-
-import { type Plugin, loadEnv } from 'vite';
-
-import { handleAiCommand, handleAiCopilot } from './worker';
-
-function readBody(req: IncomingMessage): Promise<Buffer> {
-  return new Promise((resolve, reject) => {
-    const chunks: Buffer[] = [];
-
-    req.on('data', (chunk: Buffer) => chunks.push(chunk));
-    req.on('end', () => resolve(Buffer.concat(chunks)));
-    req.on('error', reject);
-  });
-}
-
-export function plateEditorPlugin(): Plugin {
-  let env: Record<string, string>;
-
-  return {
-    name: 'plate-editor-ai',
-    configResolved(config) {
-      env = loadEnv(config.mode, config.root, '');
-    },
-    configureServer(server) {
-      server.middlewares.use(async (req, res, next) => {
-        if (req.url !== '/api/ai/command' && req.url !== '/api/ai/copilot') {
-          return next();
-        }
-
-        const body = await readBody(req);
-        const request = new Request(`http://localhost${req.url}`, {
-          method: req.method,
-          headers: req.headers as Record<string, string>,
-          body: body.length > 0 ? new Uint8Array(body) : undefined
-        });
-
-        const response = req.url === '/api/ai/command' ? await handleAiCommand(request, env) : await handleAiCopilot(request, env);
-
-        res.statusCode = response.status;
-        response.headers.forEach((value, key) => res.setHeader(key, value));
-
-        if (response.body) {
-          const reader = response.body.getReader();
-          const pump = async (): Promise<void> => {
-            const { done, value } = await reader.read();
-
-            if (done) {
-              res.end();
-
-              return;
-            }
-            res.write(value);
-            await pump();
-          };
-
-          await pump();
-        } else {
-          res.end();
-        }
-      });
-    }
-  };
-}