@assistkick/create 1.9.0 → 1.11.0

package/templates/assistkick-product-system/packages/frontend/src/components/ChatMessageBubble.tsx

@@ -0,0 +1,155 @@
+/**
+ * ChatMessageBubble — renders a single chat message as a user or assistant bubble.
+ *
+ * User bubbles: right-aligned, accent-tinted background, rounded corners.
+ * Includes inline image thumbnails and file chips for attachments.
+ * Assistant bubbles: left-aligned, surface background, full-width content area.
+ *
+ * Assistant messages delegate rendering to ChatMessageContent to handle
+ * text blocks, tool use cards, and tool result blocks.
+ */
+
+import { useState, useCallback } from 'react';
+import type { ChatMessage, TextBlock, ImageBlock, FileBlock } from '../hooks/use_chat_stream';
+import { ChatMessageContent } from './ChatMessageContent';
+import { HighlightedText } from './HighlightedText';
+import { ImageLightbox } from './ImageLightbox';
+import { useProjectStore } from '../stores/useProjectStore';
+import { FileText, File as FileIcon } from 'lucide-react';
+
+interface ChatMessageBubbleProps {
+  message: ChatMessage;
+  searchQuery?: string;
+  activeMatchIndex?: number;
+  /** Global match-index offset for this message (so highlights can be globally addressed). */
+  matchIndexOffset?: number;
+}
+
+/** Build the API URL for serving a chat attachment file.
+ * Paths are stored as `.chat-uploads/<filename>` — extract just the filename for the API. */
+const buildFileUrl = (projectId: string, filePath: string): string => {
+  const fileName = filePath.replace(/^\.chat-uploads\//, '');
+  return `/api/chat-files/${encodeURIComponent(projectId)}/${encodeURIComponent(fileName)}`;
+};
+
+/** Map common MIME types to a friendly label for file chips. */
+const getFileTypeLabel = (mimeType: string): string => {
+  if (mimeType.startsWith('text/')) return 'TXT';
+  if (mimeType === 'application/pdf') return 'PDF';
+  if (mimeType === 'application/json') return 'JSON';
+  if (mimeType.includes('spreadsheet') || mimeType === 'text/csv') return 'CSV';
+  return 'FILE';
+};
+
+export function ChatMessageBubble({ message, searchQuery = '', activeMatchIndex = -1, matchIndexOffset = 0 }: ChatMessageBubbleProps) {
+  if (message.role === 'user') {
+    return <UserBubble message={message} searchQuery={searchQuery} activeMatchIndex={activeMatchIndex} matchIndexOffset={matchIndexOffset} />;
+  }
+  return <AssistantBubble message={message} searchQuery={searchQuery} activeMatchIndex={activeMatchIndex} matchIndexOffset={matchIndexOffset} />;
+}
+
+function UserBubble({ message, searchQuery, activeMatchIndex, matchIndexOffset }: { message: ChatMessage; searchQuery: string; activeMatchIndex: number; matchIndexOffset: number }) {
+  const textBlock = message.content.find((b) => b.type === 'text') as TextBlock | undefined;
+  const text = textBlock?.text ?? '';
+  const imageBlocks = message.content.filter((b): b is ImageBlock => b.type === 'image');
+  const fileBlocks = message.content.filter((b): b is FileBlock => b.type === 'file');
+  const projectId = useProjectStore((s) => s.selectedProjectId);
+
+  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
+
+  const handleImageClick = useCallback((index: number) => {
+    setLightboxIndex(index);
+  }, []);
+
+  const handleLightboxClose = useCallback(() => {
+    setLightboxIndex(null);
+  }, []);
+
+  return (
+    <div className="flex justify-end items-start gap-2">
+      <div className="max-w-[80%] overflow-hidden">
+        <div className="bg-accent/10 border border-accent/30 rounded-xl rounded-tr-sm px-4 py-2.5">
+          <pre className="m-0 text-[13px] font-mono text-content whitespace-pre-wrap break-words">
+            <HighlightedText text={text} searchQuery={searchQuery} activeMatchIndex={activeMatchIndex} matchIndexOffset={matchIndexOffset} />
+          </pre>
+
+          {/* Image thumbnails */}
+          {imageBlocks.length > 0 && projectId && (
+            <div className="flex flex-wrap gap-2 mt-2">
+              {imageBlocks.map((img, idx) => (
+                <button
+                  key={img.path}
+                  type="button"
+                  className="block w-20 h-20 rounded-md overflow-hidden border border-edge hover:border-accent transition-colors cursor-pointer bg-surface-alt shrink-0 p-0"
+                  onClick={() => handleImageClick(idx)}
+                  title={img.name}
+                >
+                  <img
+                    src={buildFileUrl(projectId, img.path)}
+                    alt={img.name}
+                    className="w-full h-full object-cover"
+                    loading="lazy"
+                  />
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* File chips */}
+          {fileBlocks.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mt-2">
+              {fileBlocks.map((file) => (
+                <span
+                  key={file.path}
+                  className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-surface-alt border border-edge text-[11px] font-mono text-content-secondary"
+                  title={file.name}
+                >
+                  {file.mimeType === 'application/pdf' ? (
+                    <FileText size={12} className="text-content-muted shrink-0" />
+                  ) : (
+                    <FileIcon size={12} className="text-content-muted shrink-0" />
+                  )}
+                  <span className="truncate max-w-32">{file.name}</span>
+                  <span className="text-content-muted text-[10px]">{getFileTypeLabel(file.mimeType)}</span>
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Lightbox overlay */}
+      {lightboxIndex !== null && projectId && (
+        <ImageLightbox
+          images={imageBlocks.map((img) => ({
+            src: buildFileUrl(projectId, img.path),
+            alt: img.name,
+          }))}
+          initialIndex={lightboxIndex}
+          onClose={handleLightboxClose}
+        />
+      )}
+    </div>
+  );
+}
+
+function AssistantBubble({ message, searchQuery, activeMatchIndex, matchIndexOffset }: { message: ChatMessage; searchQuery: string; activeMatchIndex: number; matchIndexOffset: number }) {
+  const isEmpty = message.content.length === 0;
+
+  return (
+    <div className="flex justify-start items-start gap-2">
+      <div className="max-w-[90%] min-w-0 overflow-hidden">
+        <div className="bg-surface-raised/50 border border-edge rounded-xl rounded-tl-sm px-4 py-2.5">
+          {isEmpty && message.isStreaming ? (
+            <span className="inline-flex gap-1 items-center text-[13px] font-mono text-content-muted">
+              <span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse" />
+              Thinking…
+            </span>
+          ) : (
+            <ChatMessageContent content={message.content} isStreaming={message.isStreaming} searchQuery={searchQuery} activeMatchIndex={activeMatchIndex} matchIndexOffset={matchIndexOffset} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/assistkick-product-system/packages/frontend/src/components/ChatMessageContent.tsx

@@ -0,0 +1,182 @@
+/**
+ * ChatMessageContent — renders an assistant message's content blocks in order.
+ *
+ * Iterates over the ContentBlock array and renders:
+ * - TextBlock → markdown via react-markdown (safe, no dangerouslySetInnerHTML)
+ * - ToolUseBlock → collapsed ToolUseCard (shows tool input)
+ * - ToolResultBlock → collapsed ToolResultCard (shows tool output)
+ */
+
+import ReactMarkdown from 'react-markdown';
+import type { Components } from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import type { ContentBlock, ToolResultBlock, ToolUseBlock } from '../hooks/use_chat_stream';
+import { ToolUseCard } from './ToolUseCard';
+import { HighlightedText, countMatches } from './HighlightedText';
+import { MermaidBlock } from './MermaidBlock';
+
+interface ChatMessageContentProps {
+  content: ContentBlock[];
+  isStreaming: boolean;
+  searchQuery?: string;
+  activeMatchIndex?: number;
+  matchIndexOffset?: number;
+}
+
+/**
+ * Build a lookup map from toolUseId → ToolResultBlock for quick access.
+ */
+const buildResultMap = (blocks: ContentBlock[]): Map<string, ToolResultBlock> => {
+  const map = new Map<string, ToolResultBlock>();
+  for (const block of blocks) {
+    if (block.type === 'tool_result') {
+      map.set(block.toolUseId, block);
+    }
+  }
+  return map;
+};
+
+
+/** Tailwind classes for the markdown container (replaces .chat-markdown CSS) */
+const chatMarkdownClass = [
+  'text-[13px] font-mono text-content break-words min-w-0',
+  // first/last child spacing
+  '[&>*:first-child]:mt-0 [&>*:last-child]:mb-0',
+  // headings
+  '[&_h1]:text-[16px] [&_h1]:font-bold [&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:leading-[1.3]',
+  '[&_h2]:text-[15px] [&_h2]:font-bold [&_h2]:mt-3.5 [&_h2]:mb-1.5 [&_h2]:leading-[1.3]',
+  '[&_h3]:text-[14px] [&_h3]:font-semibold [&_h3]:mt-3 [&_h3]:mb-1 [&_h3]:leading-[1.3]',
+  '[&_h4]:text-[13px] [&_h4]:font-semibold [&_h4]:mt-2.5 [&_h4]:mb-1 [&_h4]:leading-[1.3]',
+  // paragraphs
+  '[&_p]:my-1.5 [&_p]:leading-[1.6]',
+  // lists
+  '[&_ul]:list-disc [&_ol]:list-decimal [&_ul_ul]:list-circle [&_ol_ol]:list-[lower-alpha]',
+  '[&_ul]:pl-5 [&_ol]:pl-5 [&_ul]:my-1.5 [&_ol]:my-1.5',
+  '[&_li]:my-[3px] [&_li]:leading-normal [&_li>p]:my-0.5',
+  // blockquote
+  '[&_blockquote]:border-l-[3px] [&_blockquote]:border-edge [&_blockquote]:pl-3 [&_blockquote]:my-2 [&_blockquote]:text-content-secondary',
+  // pre / code
+  '[&_pre]:bg-surface-raised [&_pre]:py-2.5 [&_pre]:px-3 [&_pre]:rounded-md [&_pre]:overflow-x-auto [&_pre]:max-w-full [&_pre]:my-2 [&_pre]:text-xs [&_pre]:leading-normal',
+  '[&_pre_code]:bg-transparent [&_pre_code]:p-0',
+  '[&_code]:bg-surface-raised [&_code]:px-[5px] [&_code]:py-px [&_code]:rounded-[3px] [&_code]:text-xs',
+  // inline
+  '[&_strong]:font-bold',
+  '[&_hr]:my-3 [&_hr]:border-edge',
+  // table
+  '[&_table]:my-2 [&_table]:border-collapse [&_table]:block [&_table]:overflow-x-auto [&_table]:max-w-full',
+  '[&_th]:px-2.5 [&_th]:py-1 [&_th]:border [&_th]:border-edge [&_th]:text-xs [&_th]:font-semibold [&_th]:bg-surface-raised',
+  '[&_td]:px-2.5 [&_td]:py-1 [&_td]:border [&_td]:border-edge [&_td]:text-xs',
+].join(' ');
+
+/**
+ * Custom react-markdown components for syntax-highlighted code blocks.
+ * Fenced blocks (```lang) get Prism highlighting; inline `code` stays as a styled <code>.
+ */
+const markdownComponents: Components = {
+  code({ className, children, ...props }) {
+    const match = /language-(\w+)/.exec(className || '');
+    const codeString = String(children).replace(/\n$/, '');
+
+    // Fenced code block — has a language class set by react-markdown
+    if (match) {
+      // Mermaid code blocks render as interactive SVG diagrams
+      if (match[1] === 'mermaid') {
+        return <MermaidBlock code={codeString} />;
+      }
+
+      return (
+        <SyntaxHighlighter
+          style={oneDark}
+          language={match[1]}
+          PreTag="div"
+          customStyle={{ margin: 0, borderRadius: 6, fontSize: 12 }}
+        >
+          {codeString}
+        </SyntaxHighlighter>
+      );
+    }
+
+    // Inline code
+    return (
+      <code className={className} {...props}>
+        {children}
+      </code>
+    );
+  },
+};
+
+export const ChatMessageContent = ({ content, isStreaming, searchQuery = '', activeMatchIndex = -1, matchIndexOffset = 0 }: ChatMessageContentProps) => {
+  const resultMap = buildResultMap(content);
+
+  // Pre-compute per-block match offsets so each text block knows its global offset
+  const blockOffsets: number[] = [];
+  let runningOffset = matchIndexOffset;
+  for (const block of content) {
+    blockOffsets.push(runningOffset);
+    if (block.type === 'text' && searchQuery) {
+      runningOffset += countMatches(block.text, searchQuery);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-1 min-w-0 overflow-hidden">
+      {content.map((block, index) => {
+        if (block.type === 'text') {
+          // When there's an active search, render plain text with highlights
+          // instead of markdown to ensure match positions are accurate
+          if (searchQuery) {
+            return (
+              <div
+                key={`text-${index}`}
+                className={`${chatMarkdownClass} whitespace-pre-wrap`}
+              >
+                <HighlightedText
+                  text={block.text}
+                  searchQuery={searchQuery}
+                  activeMatchIndex={activeMatchIndex}
+                  matchIndexOffset={blockOffsets[index]}
+                />
+              </div>
+            );
+          }
+
+          return (
+            <div
+              key={`text-${index}`}
+              className={chatMarkdownClass}
+            >
+              <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+                {block.text}
+              </ReactMarkdown>
+            </div>
+          );
+        }
+
+        if (block.type === 'tool_use') {
+          const toolBlock = block as ToolUseBlock;
+          const matchedResult = toolBlock.id ? resultMap.get(toolBlock.id) : undefined;
+          const isLastBlock = index === content.length - 1;
+
+          return (
+            <ToolUseCard
+              key={`tool-${toolBlock.id || index}`}
+              name={toolBlock.name}
+              input={toolBlock.input}
+              isStreaming={isStreaming && isLastBlock && !matchedResult}
+              result={matchedResult}
+            />
+          );
+        }
+
+        // tool_result blocks are rendered inline within their ToolUseCard — skip standalone rendering
+        if (block.type === 'tool_result') {
+          return null;
+        }
+
+        return null;
+      })}
+    </div>
+  );
+};

package/templates/assistkick-product-system/packages/frontend/src/components/ChatMessageInput.tsx

@@ -0,0 +1,233 @@
+/**
+ * ChatMessageInput — multiline textarea with auto-expand, @ file and / skill
+ * mention autocomplete, and pill display for Chat v2.
+ *
+ * Features:
+ * - Auto-expands vertically as user types, up to a max height
+ * - Enter sends, Shift+Enter and Option+Enter insert a newline
+ * - Integrated attach button (left) and send button (right)
+ * - @ triggers file path autocomplete, / at start triggers skill autocomplete
+ * - Resolved mentions are highlighted inline with accent styling
+ * - Disabled state when no session is selected or while uploading
+ */
+
+import { useRef, useCallback, useEffect, useMemo } from 'react';
+import { SendHorizontal } from 'lucide-react';
+import { IconButton } from './ds/IconButton';
+import { ChatAttachButton } from './ChatAttachButton';
+import { AutocompleteDropdown } from './AutocompleteDropdown';
+import { useMentionAutocomplete } from '../hooks/use_mention_autocomplete';
+import type { SkillInfo } from '../api/client';
+
+interface ChatMessageInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSend: () => void;
+  onFilesSelected: (files: File[]) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  filePaths?: string[];
+  skills?: SkillInfo[];
+}
+
+const MAX_HEIGHT = 200;
+const MIN_HEIGHT = 42;
+
+export function ChatMessageInput({
+  value,
+  onChange,
+  onSend,
+  onFilesSelected,
+  disabled,
+  placeholder = 'Type a message\u2026',
+  filePaths = [],
+  skills = [],
+}: ChatMessageInputProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const {
+    showDropdown,
+    items,
+    selectedIndex,
+    mentions,
+    onTextChange,
+    onKeyDown: handleAutocompleteKeyDown,
+    selectItem,
+  } = useMentionAutocomplete({
+    filePaths,
+    skills,
+    value,
+    onChange,
+    textareaRef,
+  });
+
+  const adjustHeight = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${Math.min(el.scrollHeight, MAX_HEIGHT)}px`;
+  }, []);
+
+  useEffect(() => {
+    adjustHeight();
+  }, [value, adjustHeight]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      // Let autocomplete handle keys first
+      if (handleAutocompleteKeyDown(e)) return;
+
+      if (e.key === 'Enter') {
+        // Shift+Enter: default behavior (newline)
+        if (e.shiftKey) return;
+
+        // Option+Enter (Alt+Enter): insert newline manually
+        if (e.altKey) {
+          e.preventDefault();
+          const textarea = textareaRef.current;
+          if (textarea) {
+            const start = textarea.selectionStart;
+            const end = textarea.selectionEnd;
+            const newValue = value.slice(0, start) + '\n' + value.slice(end);
+            onChange(newValue);
+            requestAnimationFrame(() => {
+              textarea.selectionStart = start + 1;
+              textarea.selectionEnd = start + 1;
+            });
+          }
+          return;
+        }
+
+        // Plain Enter: send message
+        e.preventDefault();
+        if (!disabled && value.trim()) {
+          onSend();
+        }
+      }
+    },
+    [disabled, value, onSend, onChange, handleAutocompleteKeyDown],
+  );
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      const cursorPos = e.target.selectionStart;
+      onChange(newValue);
+      onTextChange(newValue, cursorPos);
+    },
+    [onChange, onTextChange],
+  );
+
+  // Detect trigger on cursor movement (click or arrow keys without value change)
+  const handleSelectionChange = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    onTextChange(textarea.value, textarea.selectionStart);
+  }, [onTextChange]);
+
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const hasMentions = mentions.length > 0;
+
+  // Sync overlay scroll with textarea
+  const handleScroll = useCallback(() => {
+    if (textareaRef.current && overlayRef.current) {
+      overlayRef.current.scrollTop = textareaRef.current.scrollTop;
+    }
+  }, []);
+
+  // Build overlay content: plain text + highlighted mention spans
+  const overlayContent = useMemo(() => {
+    if (!hasMentions) return null;
+
+    const sorted = [...mentions].sort((a, b) => a.startIndex - b.startIndex);
+    const parts: React.ReactNode[] = [];
+    let lastEnd = 0;
+
+    sorted.forEach((mention, i) => {
+      if (mention.startIndex > lastEnd) {
+        parts.push(value.slice(lastEnd, mention.startIndex));
+      }
+      parts.push(
+        <span
+          key={`m${i}`}
+          className="bg-accent/15 text-accent rounded-[3px] ring-1 ring-accent/25"
+        >
+          {value.slice(mention.startIndex, mention.endIndex)}
+        </span>,
+      );
+      lastEnd = mention.endIndex;
+    });
+
+    if (lastEnd < value.length) {
+      parts.push(value.slice(lastEnd));
+    }
+
+    return parts;
+  }, [value, mentions, hasMentions]);
+
+  return (
+    <div className="relative">
+      {/* Autocomplete dropdown positioned above */}
+      {showDropdown && (
+        <div className="absolute bottom-full left-0 right-0 mb-1 z-50">
+          <AutocompleteDropdown
+            items={items}
+            selectedIndex={selectedIndex}
+            onSelect={selectItem}
+          />
+        </div>
+      )}
+
+      <div className="flex flex-col bg-surface-alt border border-edge rounded-xl focus-within:border-accent transition-colors duration-150">
+        {/* Input row */}
+        <div className="flex items-end gap-2 px-3 py-2">
+          <ChatAttachButton onFilesSelected={onFilesSelected} disabled={disabled} />
+
+          <div className="relative flex-1">
+            {/* Overlay behind textarea for inline mention highlights */}
+            {hasMentions && (
+              <div
+                ref={overlayRef}
+                className="absolute inset-0 text-[13px] font-mono text-content leading-relaxed whitespace-pre-wrap break-words overflow-hidden pointer-events-none"
+                aria-hidden="true"
+              >
+                {overlayContent}
+              </div>
+            )}
+
+            <textarea
+              ref={textareaRef}
+              value={value}
+              onChange={handleChange}
+              onKeyDown={handleKeyDown}
+              onSelect={handleSelectionChange}
+              onClick={handleSelectionChange}
+              onScroll={handleScroll}
+              disabled={disabled}
+              placeholder={placeholder}
+              rows={1}
+              className="relative w-full bg-transparent text-[13px] font-mono leading-relaxed placeholder:text-content-muted outline-none resize-none"
+              style={{
+                minHeight: `${MIN_HEIGHT - 16}px`,
+                maxHeight: `${MAX_HEIGHT}px`,
+                ...(hasMentions
+                  ? { color: 'transparent', caretColor: 'var(--color-content)' }
+                  : { color: 'var(--color-content)' }),
+              }}
+            />
+          </div>
+
+          <IconButton
+            label="Send message"
+            variant="accent"
+            size="sm"
+            disabled={disabled || !value.trim()}
+            onClick={onSend}
+          >
+            <SendHorizontal size={14} strokeWidth={2} />
+          </IconButton>
+        </div>
+      </div>
+    </div>
+  );
+}