@docyrus/ui-pro-ai-assistant 0.0.1

package/src/views/projects-panel.tsx

@@ -0,0 +1,131 @@
+'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

@@ -0,0 +1,98 @@
+'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

@@ -0,0 +1,256 @@
+'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

@@ -0,0 +1,98 @@
+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;