@slipstream-ui/ai 0.0.0-stage → 0.3.0

package/dist/manifests/message.manifest.json

@@ -0,0 +1,235 @@
+{
+  "id": "message",
+  "name": "Message",
+  "tier": "molecule",
+  "description": "A chat message component that displays messages from users, assistants, or system prompts with optional avatars",
+  "designIntent": "The Message component renders individual chat messages with proper styling based on the message role (user, assistant, system, tool). It handles avatar display, timestamps, and different visual treatments to distinguish between message types in a conversation interface.",
+  "props": [
+    {
+      "name": "message",
+      "type": "Message",
+      "required": true,
+      "description": "The message object containing role, content, and optional metadata",
+      "examples": [
+        "{ id: '1', role: 'user', content: 'Hello' }",
+        "{ id: '2', role: 'assistant', content: 'Hi there!' }"
+      ]
+    },
+    {
+      "name": "showAvatar",
+      "type": "boolean",
+      "defaultValue": "true",
+      "required": false,
+      "description": "Whether to show the avatar for the message",
+      "examples": [
+        true,
+        false
+      ]
+    },
+    {
+      "name": "avatarSrc",
+      "type": "string",
+      "required": false,
+      "description": "Optional custom avatar image URL",
+      "examples": [
+        "https://example.com/avatar.png"
+      ]
+    },
+    {
+      "name": "avatarFallback",
+      "type": "string",
+      "required": false,
+      "description": "Fallback text to show when avatar image is not available",
+      "examples": [
+        "JD",
+        "AI",
+        "Bot"
+      ]
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "description": "Additional CSS classes to apply to the message container"
+    },
+    {
+      "name": "renderContent",
+      "type": "(content: string) => ReactNode",
+      "required": false,
+      "description": "Custom renderer (e.g. markdown); replaces default plain-text rendering."
+    },
+    {
+      "name": "isStreaming",
+      "type": "boolean",
+      "defaultValue": false,
+      "required": false,
+      "description": "Shows a typing cursor and sets aria-busy while the response is still generating."
+    },
+    {
+      "name": "userLabel",
+      "type": "string",
+      "defaultValue": "You",
+      "required": false,
+      "description": "Display name for user messages; enables localization."
+    },
+    {
+      "name": "assistantLabel",
+      "type": "string",
+      "defaultValue": "Assistant",
+      "required": false,
+      "description": "Display name for assistant messages; enables localization."
+    },
+    {
+      "name": "error",
+      "type": "string",
+      "required": false,
+      "description": "Error text to render on the message; shows an error card with retry"
+    },
+    {
+      "name": "onRetry",
+      "type": "() => void",
+      "required": false,
+      "description": "Called when the user requests a retry after error; omit to hide the action"
+    },
+    {
+      "name": "labels",
+      "type": "{ retry?: string; edit?: string; save?: string; cancel?: string }",
+      "required": false,
+      "description": "Override button labels in the message actions"
+    },
+    {
+      "name": "onEditContent",
+      "type": "(content: string) => void",
+      "required": false,
+      "description": "Enables edit-and-resubmit; called with the edited content"
+    }
+  ],
+  "examples": [
+    {
+      "title": "User message",
+      "code": "<Message message={{ id: '1', role: 'user', content: 'Hello, how are you?' }} />",
+      "description": "Message from the user with default avatar"
+    },
+    {
+      "title": "Assistant message",
+      "code": "<Message message={{ id: '2', role: 'assistant', content: 'I\\'m doing well, thank you!' }} />",
+      "description": "Message from the AI assistant"
+    },
+    {
+      "title": "System message",
+      "code": "<Message message={{ id: '3', role: 'system', content: 'System initialized' }} />",
+      "description": "System-level message with distinct styling"
+    },
+    {
+      "title": "With custom avatar",
+      "code": "<Message \n  message={{ id: '4', role: 'assistant', content: 'Hello' }}\n  avatarSrc=\"/ai-avatar.png\"\n  avatarFallback=\"AI\"\n/>",
+      "description": "Message with custom avatar image and fallback"
+    },
+    {
+      "title": "Without avatar",
+      "code": "<Message \n  message={{ id: '5', role: 'user', content: 'Quick message' }}\n  showAvatar={false}\n/>",
+      "description": "Message with avatar hidden for more compact display"
+    },
+    {
+      "title": "Markdown rendering (opt-in)",
+      "code": "<Message message={m} renderContent={(c) => <ReactMarkdown>{c}</ReactMarkdown>} />"
+    },
+    {
+      "title": "Streaming response",
+      "code": "<Message message={partial} isStreaming />"
+    }
+  ],
+  "antiPatterns": [
+    {
+      "title": "Don't use for complex content",
+      "explanation": "Message content should be plain text. For complex UI, use additional components.",
+      "example": "// Avoid: Putting complex UI inside message content\n<Message message={{ \n  role: 'assistant', \n  content: '<div>Complex HTML</div>' \n}} />\n\n// Prefer: Use separate components for complex content\n<Message message={{ role: 'assistant', content: 'Here is the data:' }} />\n<DataDisplay data={...} />"
+    },
+    {
+      "title": "Don't hardcode message data",
+      "explanation": "Messages should come from a conversation state, not be hardcoded",
+      "example": "// Avoid: Hardcoded message\n<Message message={{ id: '1', role: 'user', content: 'Fixed text' }} />\n\n// Prefer: Dynamic message from state\n<Message message={messages[currentIndex]} />"
+    }
+  ],
+  "accessibility": [
+    {
+      "feature": "Screen reader support",
+      "implementation": "Message role and content are announced. Avatar has proper alt text from fallback or role",
+      "userRequirements": "Ensure avatarFallback is meaningful when avatarSrc is used"
+    },
+    {
+      "feature": "Color contrast",
+      "implementation": "User and assistant messages have distinct background colors with proper contrast",
+      "userRequirements": "Test color contrast in both light and dark modes"
+    },
+    {
+      "feature": "Semantic structure",
+      "implementation": "Message is rendered as a div with proper ARIA attributes for role identification",
+      "userRequirements": "Consider adding aria-live regions for streaming messages"
+    }
+  ],
+  "contentGuidelines": [
+    {
+      "contentType": "Message content",
+      "guidelines": [
+        "Content should be plain text, not HTML",
+        "Support markdown formatting if needed (apply at wrapper level)",
+        "Keep messages focused and concise",
+        "Use proper punctuation and grammar for assistant messages",
+        "For user messages, preserve user's original formatting"
+      ],
+      "goodExamples": [
+        "I can help you with that task.",
+        "Here's the code you requested:",
+        "Let me explain step by step."
+      ],
+      "badExamples": [
+        "<b>Bold text</b>",
+        "Lorem ipsum dolor sit amet",
+        "Click here to continue"
+      ]
+    },
+    {
+      "contentType": "Avatar fallback",
+      "guidelines": [
+        "Use 1-2 characters maximum",
+        "Use initials for user names",
+        "Use meaningful abbreviations for bots",
+        "Ensure high contrast with avatar background"
+      ],
+      "goodExamples": [
+        "JD",
+        "AI",
+        "Bot",
+        "S"
+      ],
+      "badExamples": [
+        "John Doe",
+        "Assistant",
+        "long-text"
+      ]
+    }
+  ],
+  "compositionRules": [
+    {
+      "component": "Conversation",
+      "relationship": "Messages are typically rendered within a Conversation component that manages the message list",
+      "example": "<Conversation>\n  {messages.map(msg => <Message key={msg.id} message={msg} />)}\n</Conversation>"
+    },
+    {
+      "component": "PromptInput",
+      "relationship": "New messages from PromptInput should be added to the message list and rendered as Message components",
+      "example": "const handleSubmit = (text) => {\n  const newMessage = { id: Date.now(), role: 'user', content: text };\n  setMessages([...messages, newMessage]);\n}"
+    }
+  ],
+  "relatedComponents": [
+    "Conversation",
+    "PromptInput",
+    "Avatar"
+  ],
+  "package": "@slipstream-ui/ai",
+  "importPath": "@slipstream-ui/ai",
+  "version": "0.0.1",
+  "sourceDir": "message",
+  "exportName": "Message"
+}

package/dist/manifests/prompt-input.manifest.json

@@ -0,0 +1,334 @@
+{
+  "id": "prompt-input",
+  "name": "PromptInput",
+  "tier": "molecule",
+  "description": "A textarea input for entering chat prompts with auto-resize, keyboard shortcuts, and send button",
+  "designIntent": "The PromptInput component provides a specialized input for chat interfaces. It handles auto-resizing as the user types, supports Enter to submit (Shift+Enter for new line), and integrates with the conversation flow. It's designed to be the primary way users interact with AI assistants.",
+  "props": [
+    {
+      "name": "onSubmit",
+      "type": "(value: string) => void",
+      "required": true,
+      "description": "Callback when the user submits the prompt",
+      "examples": [
+        "(value) => sendMessage(value)"
+      ]
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "defaultValue": "Type your message...",
+      "required": false,
+      "description": "Placeholder text to display when input is empty",
+      "examples": [
+        "Type your message...",
+        "Ask me anything...",
+        "Enter your prompt..."
+      ]
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "defaultValue": "false",
+      "required": false,
+      "description": "Whether the input is disabled",
+      "examples": [
+        true,
+        false
+      ]
+    },
+    {
+      "name": "isLoading",
+      "type": "boolean",
+      "defaultValue": "false",
+      "required": false,
+      "description": "Whether a submission is currently in progress",
+      "examples": [
+        true,
+        false
+      ]
+    },
+    {
+      "name": "autoFocus",
+      "type": "boolean",
+      "defaultValue": "false",
+      "required": false,
+      "description": "Whether to auto-focus the input on mount",
+      "examples": [
+        true,
+        false
+      ]
+    },
+    {
+      "name": "maxLength",
+      "type": "number",
+      "required": false,
+      "description": "Maximum character count for the input",
+      "examples": [
+        500,
+        1000,
+        2000
+      ]
+    },
+    {
+      "name": "showSendButton",
+      "type": "boolean",
+      "defaultValue": "true",
+      "required": false,
+      "description": "Whether to show the send button",
+      "examples": [
+        true,
+        false
+      ]
+    },
+    {
+      "name": "sendButtonText",
+      "type": "string",
+      "defaultValue": "Send",
+      "required": false,
+      "description": "Text or icon for the send button",
+      "examples": [
+        "Send",
+        "Submit",
+        "→"
+      ]
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "description": "Additional CSS classes to apply to the container"
+    },
+    {
+      "name": "onStop",
+      "type": "() => void",
+      "required": false,
+      "description": "While loading, the send button becomes a stop button that calls this handler."
+    },
+    {
+      "name": "stopButtonText",
+      "type": "string",
+      "defaultValue": "Stop generating",
+      "required": false,
+      "description": "Accessible label for the stop button; enables localization."
+    },
+    {
+      "name": "attachments",
+      "type": "AttachmentItem[]",
+      "required": false,
+      "description": "Controlled attachment list shown as chips above the input"
+    },
+    {
+      "name": "onRemoveAttachment",
+      "type": "(id: string) => void",
+      "required": false,
+      "description": "Called when the user removes an attachment chip"
+    },
+    {
+      "name": "onAttachmentsChange",
+      "type": "(attachments: AttachmentItem[]) => void",
+      "required": false,
+      "description": "Called when files are added via drag-and-drop, paste, or picker"
+    },
+    {
+      "name": "hasError",
+      "type": "boolean",
+      "required": false,
+      "description": "Styles the input in an error state (e.g. after a rejected file)"
+    },
+    {
+      "name": "accept",
+      "type": "string",
+      "required": false,
+      "description": "MIME types accepted for attachments (e.g. \"image/*\")"
+    },
+    {
+      "name": "multiple",
+      "type": "boolean",
+      "required": false,
+      "description": "Allow selecting multiple files"
+    },
+    {
+      "name": "maxFiles",
+      "type": "number",
+      "required": false,
+      "description": "Maximum number of attachments allowed"
+    },
+    {
+      "name": "maxFileSize",
+      "type": "number",
+      "required": false,
+      "description": "Maximum file size in bytes; rejects larger files"
+    },
+    {
+      "name": "onAttachmentError",
+      "type": "(error: string) => void",
+      "required": false,
+      "description": "Called when an attachment is rejected (size, type, or count limit)"
+    },
+    {
+      "name": "globalDrop",
+      "type": "boolean",
+      "required": false,
+      "description": "Enable drop-anywhere-on-page file acceptance"
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": false,
+      "description": "Custom content rendered inside the input row (e.g. tool buttons)"
+    },
+    {
+      "name": "tooltip",
+      "required": false,
+      "type": "string | { content: ReactNode; shortcut?: string }",
+      "description": "Tooltip content for a toolbar button; optionally includes a keyboard shortcut hint (PromptInput.Button sub-component)"
+    },
+    {
+      "name": "active",
+      "required": false,
+      "defaultValue": "false",
+      "type": "boolean",
+      "description": "Toggles the active state on a toolbar button (PromptInput.Button sub-component)"
+    }
+  ],
+  "examples": [
+    {
+      "title": "Basic prompt input",
+      "code": "<PromptInput onSubmit={(value) => console.log(value)} />",
+      "description": "Simple prompt input with default configuration"
+    },
+    {
+      "title": "With custom placeholder",
+      "code": "<PromptInput \n  onSubmit={handleSubmit}\n  placeholder=\"Ask me anything about coding...\"\n/>",
+      "description": "Prompt input with custom placeholder text"
+    },
+    {
+      "title": "With auto-focus",
+      "code": "<PromptInput \n  onSubmit={handleSubmit}\n  autoFocus={true}\n/>",
+      "description": "Auto-focuses the input when component mounts"
+    },
+    {
+      "title": "With character limit",
+      "code": "<PromptInput \n  onSubmit={handleSubmit}\n  maxLength={500}\n/>",
+      "description": "Limits input to 500 characters"
+    },
+    {
+      "title": "Without send button",
+      "code": "<PromptInput \n  onSubmit={handleSubmit}\n  showSendButton={false}\n/>",
+      "description": "Hides the send button (user must press Enter)"
+    },
+    {
+      "title": "With loading state",
+      "code": "<PromptInput \n  onSubmit={handleSubmit}\n  isLoading={isGenerating}\n  disabled={isGenerating}\n/>",
+      "description": "Shows loading state and disables while AI is responding"
+    },
+    {
+      "title": "Cancellable generation",
+      "code": "<PromptInput onSubmit={send} isLoading={loading} onStop={() => abortRef.current.abort()} />"
+    }
+  ],
+  "antiPatterns": [
+    {
+      "title": "Don't use for non-chat input",
+      "explanation": "PromptInput is specifically for chat interactions, not general form input",
+      "example": "// Avoid: Using PromptInput for forms\n<PromptInput onSubmit={handleFormSubmit} />\n\n// Prefer: Use appropriate form input components\n<TextArea onChange={handleChange} />"
+    },
+    {
+      "title": "Don't ignore Enter key behavior",
+      "explanation": "Users expect Enter to submit. If you change this, communicate it clearly",
+      "example": "// Avoid: Confusing users by disabling Enter\n<PromptInput \n  onSubmit={handleSubmit}\n  // Users expect Enter to submit\n/>\n\n// If you need different behavior, document it clearly"
+    },
+    {
+      "title": "Don't validate after submission",
+      "explanation": "Disable the input when empty rather than validating in the handler",
+      "example": "// Avoid: Validating in onSubmit\n<PromptInput onSubmit={(value) => {\n  if (!value) return; // Validate before\n  sendMessage(value);\n}} />\n\n// Prefer: Disable button when empty\n<PromptInput \n  onSubmit={sendMessage}\n  disabled={!value}\n/>"
+    }
+  ],
+  "accessibility": [
+    {
+      "feature": "Keyboard navigation",
+      "implementation": "Full keyboard support with Enter to submit, Shift+Enter for new line",
+      "userRequirements": "Document keyboard shortcuts for users"
+    },
+    {
+      "feature": "Screen reader support",
+      "implementation": "Textarea has proper label and placeholder. Button state is announced",
+      "userRequirements": "Ensure placeholder text is descriptive and helpful"
+    },
+    {
+      "feature": "Form validation",
+      "implementation": "Button is disabled when input is empty, preventing invalid submissions",
+      "userRequirements": "Consider adding aria-invalid for custom validation if needed"
+    },
+    {
+      "feature": "Auto-resize",
+      "implementation": "Textarea automatically grows with content up to max-height",
+      "userRequirements": "Test with screen readers to ensure height changes are announced appropriately"
+    }
+  ],
+  "contentGuidelines": [
+    {
+      "contentType": "Placeholder text",
+      "guidelines": [
+        "Use action-oriented placeholder text",
+        "Be specific about what kind of input is expected",
+        "Keep placeholders concise (under 50 characters ideally)",
+        "Avoid generic placeholders like 'Enter text'",
+        "Consider the context of the conversation"
+      ],
+      "goodExamples": [
+        "Type your message...",
+        "Ask me anything about coding...",
+        "Describe what you'd like to build..."
+      ],
+      "badExamples": [
+        "Enter text here",
+        "Input",
+        "Type something",
+        "Lorem ipsum dolor sit amet"
+      ]
+    },
+    {
+      "contentType": "Send button",
+      "guidelines": [
+        "Use clear icons or text for the send button",
+        "Consider using an arrow icon (→) for a modern look",
+        "Show loading state when submitting",
+        "Disable button when input is empty"
+      ],
+      "goodExamples": [
+        "→",
+        "Send",
+        "Submit"
+      ],
+      "badExamples": [
+        "Click me",
+        "OK",
+        "Go"
+      ]
+    }
+  ],
+  "compositionRules": [
+    {
+      "component": "Conversation",
+      "relationship": "PromptInput is typically used below a Conversation component to add new messages",
+      "example": "Conversation displays messages, PromptInput submits new ones to the same messages array"
+    },
+    {
+      "component": "ChatLayout",
+      "relationship": "PromptInput is often part of a ChatLayout that combines Conversation and input",
+      "example": "ChatLayout wraps Conversation and PromptInput in a complete chat interface"
+    }
+  ],
+  "relatedComponents": [
+    "Conversation",
+    "ChatLayout",
+    "Button"
+  ],
+  "package": "@slipstream-ui/ai",
+  "importPath": "@slipstream-ui/ai",
+  "version": "0.0.1",
+  "sourceDir": "prompt-input",
+  "exportName": "PromptInput"
+}