@sybilion/uilib 1.3.9 → 1.3.11

package/src/components/ui/FileChip/FileChip.styl

@@ -0,0 +1,108 @@
+@import 'lib/theme.styl'
+
+.root
+  appearance none
+  border 0
+  margin 0
+  font inherit
+  display flex
+  align-items stretch
+  width fit-content
+  max-width 100%
+  text-align left
+  padding var(--p-3)
+  padding-right var(--p-4)
+  background-color var(--background)
+  box-shadow 0 0 0 1px var(--border)
+  border-radius var(--p-3)
+  color inherit
+
+  :global(.dark) &
+    background-color var(--sb-gray-800)
+
+.header
+  display flex
+  flex-direction row
+  align-items center
+  gap var(--p-2)
+  width 100%
+  min-width 0
+  font-size inherit
+
+  :global([data-slot="card-action"])
+    grid-column auto
+    grid-row auto
+    align-self center
+    margin-left auto
+    flex-shrink 0
+    order 3
+
+  // CardHeader: icon wrapper, then action children, then headerText
+  & > div:first-child
+    order 1
+    display flex
+    align-items center
+    justify-content center
+    width 32px
+    height 32px
+    min-width 32px
+    flex-shrink 0
+    border-radius 0
+    box-shadow none
+    background transparent
+
+    & > svg
+      width 32px
+      height 32px
+
+  & > div:last-child
+    order 2
+    flex 1
+    min-width 0
+
+.interactive
+  cursor pointer
+  transition background-color 150ms
+
+  &:hover
+    background-color var(--sb-gray-50)
+
+  &:focus-visible
+    outline 2px solid var(--ring)
+    outline-offset 2px
+
+  :global(.dark) &
+    &:hover
+      background-color var(--sb-gray-900)
+
+.title
+  font-size var(--text-sm)
+  font-weight 500
+  line-height 1.4
+  white-space nowrap
+  overflow hidden
+  text-overflow ellipsis
+
+.hint
+  font-size var(--text-xs)
+  line-height 1.4
+
+.remove
+  display inline-flex
+  align-items center
+  justify-content center
+  width 28px
+  height 28px
+  border none
+  border-radius var(--p-2)
+  background transparent
+  color var(--muted-foreground)
+  cursor pointer
+
+  &:hover:not(:disabled)
+    background-color var(--muted)
+    color var(--foreground)
+
+  &:disabled
+    opacity 0.5
+    cursor not-allowed

package/src/components/ui/FileChip/FileChip.styl.d.ts

@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'header': string;
+  'hint': string;
+  'interactive': string;
+  'remove': string;
+  'root': string;
+  'title': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/FileChip/FileChip.tsx

@@ -0,0 +1,93 @@
+import cn from 'classnames';
+
+import { CsvIcon } from '#uilib/components/icons/CsvIcon/CsvIcon';
+import { CardAction, CardHeader } from '#uilib/components/ui/Card';
+import { FileTextIcon, XIcon } from '@phosphor-icons/react';
+
+import S from './FileChip.styl';
+import type { FileChipFormat, FileChipProps } from './FileChip.types';
+
+const FORMAT_ICON_SIZE = 32;
+
+function FormatIcon({ format }: { format: FileChipFormat }) {
+  if (format === 'csv') {
+    return <CsvIcon size={FORMAT_ICON_SIZE} />;
+  }
+
+  return (
+    <FileTextIcon
+      size={FORMAT_ICON_SIZE}
+      aria-hidden
+      style={{ color: 'var(--muted-foreground)' }}
+    />
+  );
+}
+
+function FileChipHeader({
+  name,
+  format,
+  hint,
+  onRemove,
+}: Pick<FileChipProps, 'name' | 'format' | 'hint' | 'onRemove' | 'disabled'>) {
+  return (
+    <CardHeader
+      className={S.header}
+      icon={<FormatIcon format={format} />}
+      title={name}
+      description={hint}
+      titleClassName={S.title}
+      descriptionClassName={S.hint}
+      tooltipProps={{ maxWidth: 400 }}
+    >
+      {onRemove ? (
+        <CardAction>
+          <button
+            type="button"
+            className={S.remove}
+            aria-label={`Remove ${name}`}
+            onClick={onRemove}
+          >
+            <XIcon size={14} aria-hidden />
+          </button>
+        </CardAction>
+      ) : null}
+    </CardHeader>
+  );
+}
+
+export function FileChip({
+  name,
+  format,
+  hint,
+  onClick,
+  onRemove,
+  className,
+}: FileChipProps) {
+  const header = (
+    <FileChipHeader
+      name={name}
+      format={format}
+      hint={hint}
+      onRemove={onRemove}
+    />
+  );
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        className={cn(S.root, S.interactive, className)}
+        aria-label={`${hint}: ${name}`}
+        onClick={onClick}
+      >
+        {header}
+      </button>
+    );
+  }
+
+  return (
+    <div className={cn(S.root, className)} role="group">
+      {header}
+    </div>
+  );
+}

package/src/components/ui/FileChip/FileChip.types.ts

@@ -0,0 +1,11 @@
+export type FileChipFormat = 'csv' | 'pdf' | 'text';
+
+export type FileChipProps = {
+  name: string;
+  format: FileChipFormat;
+  hint: string;
+  onClick?: () => void;
+  onRemove?: () => void;
+  disabled?: boolean;
+  className?: string;
+};

package/src/components/ui/FileChip/index.ts

@@ -0,0 +1,2 @@
+export { FileChip } from './FileChip';
+export type { FileChipProps, FileChipFormat } from './FileChip.types';

package/src/docs/pages/ChatAttachmentsDropzonePage.tsx

@@ -0,0 +1,162 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import {
+  type ChatAttachmentDropItem,
+  ChatChrome,
+  type Message,
+  MessageRole,
+  TEXT_ATTACHMENT_ACCEPT_PARTS,
+} from '#uilib/components/ui/Chat';
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { ScrollRef } from '@homecode/ui';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const NO_QUICK_REPLY_KEYS: ReadonlySet<string> = new Set();
+
+const ASSISTANT_REPLY =
+  'Message received. Attachment text is included in the user bubble above.';
+
+function makeMessage(role: MessageRole, text: string): Message {
+  return {
+    id: crypto.randomUUID(),
+    role,
+    text,
+    timestamp: Date.now(),
+  };
+}
+
+function formatAttachmentUserText(items: ChatAttachmentDropItem[]): string {
+  return items
+    .map(item => {
+      const preview =
+        item.text.length > 400
+          ? `${item.text.slice(0, 400).trim()}…`
+          : item.text.trim();
+      return `[${item.kind}] ${item.file.name}\n\n${preview || '(empty file)'}`;
+    })
+    .join('\n\n---\n\n');
+}
+
+function formatSubmittedMessage(
+  text: string,
+  attachments?: ChatAttachmentDropItem[],
+): string {
+  const parts = [
+    text.trim(),
+    attachments?.length ? formatAttachmentUserText(attachments) : '',
+  ].filter(Boolean);
+  return parts.join('\n\n');
+}
+
+export default function ChatAttachmentsDropzonePage() {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const replyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const scrollRef = useRef<ScrollRef>(null);
+
+  useEffect(() => {
+    return () => {
+      if (replyTimeoutRef.current != null) {
+        clearTimeout(replyTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const isEmpty = messages.length === 0 && !isLoading;
+  const isLastMessageFromUser =
+    messages.length > 0 &&
+    messages[messages.length - 1]?.role === MessageRole.USER;
+
+  const onPromptSubmit = useCallback(
+    (raw: string, attachments?: ChatAttachmentDropItem[]) => {
+      const body = formatSubmittedMessage(raw, attachments);
+      if (!body || isLoading) return;
+
+      setMessages(prev => [...prev, makeMessage(MessageRole.USER, body)]);
+      setIsLoading(true);
+
+      if (replyTimeoutRef.current != null) {
+        clearTimeout(replyTimeoutRef.current);
+      }
+      replyTimeoutRef.current = setTimeout(() => {
+        replyTimeoutRef.current = null;
+        setMessages(prev => [
+          ...prev,
+          makeMessage(MessageRole.ASSISTANT, ASSISTANT_REPLY),
+        ]);
+        setIsLoading(false);
+      }, 900);
+    },
+    [isLoading],
+  );
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Chat' }, { label: 'Attachments dropzone' }]}
+        title="Chat — attachments dropzone"
+        subheader="Drop text files onto the chat shell; they appear on the prompt until you send."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <p style={{ marginBottom: 16, fontSize: 14, lineHeight: 1.5 }}>
+          Drop a <code>.txt</code>, <code>.csv</code>, <code>.md</code>, or{' '}
+          <code>.pdf</code> file anywhere on the chat panel. The file shows
+          above the composer; press send to post it. Only MIME types from the
+          text allowlist are accepted; PDF parsing is optional via{' '}
+          <code>allowPdfAttachments</code>.
+        </p>
+        <ChatChrome
+          showResizeHandle={false}
+          resizeHandle={undefined}
+          onClose={undefined}
+          isEmpty={isEmpty}
+          renderPresets={() => null}
+          messages={messages}
+          onQuickReply={() => {}}
+          suppressedQuickReplyKeys={NO_QUICK_REPLY_KEYS}
+          isLoading={isLoading}
+          scriptContinueLabel={undefined}
+          onScriptContinue={undefined}
+          showBranchActionsRow={false}
+          showSyntheticBranchButtons={false}
+          unusedBranchKeys={[]}
+          isScriptComplete={false}
+          onGenerateDashboard={undefined}
+          generatingDashboard={false}
+          onGenerateDashboardClick={() => {}}
+          showInlinePresets={false}
+          isLastMessageFromUser={isLastMessageFromUser}
+          scrollRef={scrollRef}
+          effectiveScopeId="docs-chat-attachments-dropzone"
+          onPromptSubmit={onPromptSubmit}
+          onChatDeleted={() => {}}
+          allowedAttachments={[
+            'text/plain',
+            '.txt',
+            'text/csv',
+            '.csv',
+            'text/markdown',
+            '.md',
+            'application/json',
+            '.json',
+          ]}
+          allowPdfAttachments
+          emptyState={{
+            title: 'Drop a text file or PDF',
+            description:
+              'Drag a file onto this panel, review it above the composer, then send.',
+            additionalContent: (
+              <p style={{ fontSize: 13, opacity: 0.85 }}>
+                Base allowlist includes{' '}
+                {TEXT_ATTACHMENT_ACCEPT_PARTS.slice(0, 6).join(', ')}…
+              </p>
+            ),
+          }}
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/FileChipPage.tsx

@@ -0,0 +1,50 @@
+import { FileChip } from '#uilib/components/ui/FileChip';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const LONG_NAME =
+  'quarterly_procurement_open_orders_analysis_am_i_overpaying_export_final_v2.csv';
+
+export default function FileChipPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'FileChip' }]}
+        title="FileChip"
+        subheader="Compact file row for chat attachments and downloadable CSV presets."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          gap: '1rem',
+        }}
+      >
+        <FileChip name="report.pdf" format="pdf" hint="PDF" />
+        <FileChip
+          name="notes.txt"
+          format="text"
+          hint="Text file"
+          onRemove={() => {}}
+        />
+        <FileChip
+          name={LONG_NAME}
+          format="csv"
+          hint="Download CSV file"
+          onClick={() => {}}
+        />
+        <FileChip
+          name={LONG_NAME}
+          format="csv"
+          hint="Download CSV file"
+          onClick={() => {}}
+          onRemove={() => {}}
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/registry.ts

@@ -61,6 +61,12 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Data display',
     load: () => import('./pages/BadgePage'),
   },
+  {
+    slug: 'file-chip',
+    title: 'FileChip',
+    section: 'Data display',
+    load: () => import('./pages/FileChipPage'),
+  },
   {
     slug: 'breadcrumb',
     title: 'Breadcrumb',
@@ -109,6 +115,12 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Chat',
     load: () => import('./pages/ChatUserCsvAttachmentPage'),
   },
+  {
+    slug: 'chat-attachments-dropzone',
+    title: 'Chat attachments dropzone',
+    section: 'Chat',
+    load: () => import('./pages/ChatAttachmentsDropzonePage'),
+  },
   {
     slug: 'checkbox',
     title: 'Checkbox',

package/src/index.ts

@@ -29,6 +29,7 @@ export * from './components/ui/Dialog';
 export * from './components/ui/Drawer';
 export * from './components/ui/DropdownMenu';
 export * from './components/ui/DropZone/DropZone';
+export * from './components/ui/FileChip';
 export * from './components/ui/FlickeringGrid';
 export * from './components/ui/Foldable';
 export * from './components/ui/Gap/Gap';