@salesforcedevs/docs-components 0.0.9-edit → 0.0.11-chat

package/src/modules/doc/chat/README.md

@@ -1,179 +0,0 @@
-# Sliding Chat Component (doc-chat)
-
-A self-contained sliding chat component with a floating trigger button that can be embedded in any layout, perfect for customer support, documentation help, or any conversational interface.
-
-## Features
-
-- 🎯 **Sliding Component**: Slides in/out with smooth animations
-- 🔘 **Floating Trigger**: Built-in floating button to open chat (bottom-right corner)
-- 💬 **Real-time Chat**: Interactive messaging with typing indicators
-- 🎨 **Modern Design**: Clean, responsive interface with subtle animations
-- ⚙️ **Configurable**: Customizable title, placeholder, and assistant name
-- 📱 **Mobile Friendly**: Full-width on mobile devices
-- ♿ **Accessible**: ARIA labels and keyboard navigation
-- 🎭 **Storybook Ready**: Multiple story variations for testing
-
-## Basic Usage
-
-The component is completely self-contained with a built-in floating trigger button:
-
-```html
-<doc-chat
-    title="Customer Support"
-    placeholder="How can we help you today?"
-    assistant-name="Support Bot"
-    is-open="false"
-    show-timestamp="true"
-></doc-chat>
-```
-
-That's it! The component will automatically show a floating chat button in the bottom-right corner when closed, and slide in the chat interface when opened.
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `title` | String | `"Chat"` | Title displayed in the chat header |
-| `placeholder` | String | `"Type your message..."` | Placeholder text for input field |
-| `assistant-name` | String | `"Assistant"` | Name of the assistant/bot |
-| `disabled` | Boolean | `false` | Disables the chat functionality |
-| `show-timestamp` | Boolean | `false` | Shows timestamps on messages |
-| `is-open` | Boolean | `false` | Controls sidebar visibility |
-
-## Methods
-
-| Method | Description |
-|--------|-------------|
-| `openChat()` | Opens the chat sidebar |
-| `closeChat()` | Closes the chat sidebar |
-
-## Events
-
-| Event | Description | Detail |
-|-------|-------------|--------|
-| `chatopened` | Fired when chat is opened | `{ opened: true }` |
-| `chatclosed` | Fired when chat is closed | `{ closed: true }` |
-
-## Integration Example
-
-### Simple Integration (Self-Contained)
-```html
-<!-- The component includes its own trigger button -->
-<doc-chat
-    title="Customer Support"
-    placeholder="How can we help you today?"
-    assistant-name="Support Bot"
-    show-timestamp="true"
-    is-open="false"
-></doc-chat>
-```
-
-### Advanced Integration (With Custom Triggers)
-```html
-<!-- Optional: Custom trigger button -->
-<button id="chat-trigger" onclick="openSupportChat()">
-    💬 Need Help?
-</button>
-
-<!-- Chat component -->
-<doc-chat
-    id="support-chat"
-    title="Customer Support"
-    placeholder="How can we help you today?"
-    assistant-name="Support Bot"
-    show-timestamp="true"
-    is-open="false"
-></doc-chat>
-```
-
-### JavaScript
-```javascript
-// Optional: Custom trigger function
-function openSupportChat() {
-    const chat = document.getElementById('support-chat');
-    chat.openChat();
-}
-
-// Listen for chat events
-document.getElementById('support-chat').addEventListener('chatclosed', (event) => {
-    console.log('Chat was closed');
-});
-
-document.getElementById('support-chat').addEventListener('chatopened', (event) => {
-    console.log('Chat was opened');
-});
-```
-
-## Styling
-
-The component uses CSS custom properties for easy theming:
-
-```css
-doc-chat {
-    --chat-width: 400px;
-    --chat-z-index: 1000;
-    --chat-transition-duration: 0.3s;
-    --chat-header-bg: #f8f9fa;
-    --chat-primary-color: #0066cc;
-    --chat-border-color: #e0e0e0;
-}
-```
-
-## Responsive Behavior
-
-- **Desktop**: Fixed width component (400px)
-- **Tablet**: Full width component
-- **Mobile**: Full width component
-
-## Accessibility
-
-- ARIA labels for screen readers
-- Keyboard navigation support
-- High contrast mode support
-- Reduced motion preferences respected
-
-## Assistant Response Simulation
-
-The component includes a built-in response simulation system that responds to:
-
-- **Greetings**: "Hello", "Hi" → Friendly greeting
-- **Help requests**: "Help" → Assistance offer
-- **Documentation**: "Documentation", "Docs" → Navigation help
-- **General messages**: Contextual responses
-
-### Replacing with Real API
-
-To integrate with a real chat API, replace the `simulateAssistantResponse` method:
-
-```javascript
-// Replace this method in your extended component
-simulateAssistantResponse(userMessage) {
-    // Call your chat API
-    fetch('/api/chat', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ message: userMessage })
-    })
-    .then(response => response.json())
-    .then(data => {
-        this.addMessage(data.response, 'assistant');
-    });
-}
-```
-
-## Browser Support
-
-- Chrome 80+
-- Firefox 72+
-- Safari 13+
-- Edge 80+
-
-## Examples
-
-Check out the Storybook examples for various use cases:
-
-- **Default**: Basic chat setup
-- **With Timestamps**: Shows message timestamps
-- **Interactive Demo**: Fully functional example
-- **Mobile View**: Mobile device simulation
-- **Chat Trigger Example**: Integration patterns 

package/src/modules/doc/editFile/editFile.css

@@ -1,511 +0,0 @@
-/* Host container */
-:host {
-    font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont,
-        "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
-        sans-serif;
-    position: absolute;
-    top: 10px;
-    left: 50%;
-    z-index: 1000;
-}
-
-/* Edit File Trigger Button */
-.edit-file-trigger {
-    background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
-    color: white;
-    border: none;
-    border-radius: 12px;
-    padding: 12px 16px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    box-shadow: 0 4px 16px rgb(1 118 211 / 25%), 0 2px 8px rgb(1 118 211 / 15%);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    font-size: 14px;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-    width: 150px;
-    justify-content: center;
-}
-
-.edit-file-trigger:hover:not(:disabled) {
-    background: linear-gradient(135deg, #005fb2 0%, #003e73 100%);
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgb(1 118 211 / 35%), 0 4px 12px rgb(1 118 211 / 25%);
-}
-
-.edit-file-trigger:active:not(:disabled) {
-    transform: translateY(0);
-    box-shadow: 0 2px 8px rgb(1 118 211 / 30%);
-}
-
-.edit-file-trigger:disabled {
-    background: #d8dde6;
-    color: #706e6b;
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
-}
-
-.edit-file-icon {
-    width: 18px;
-    height: 18px;
-    flex-shrink: 0;
-}
-
-.edit-file-trigger-text {
-    font-weight: 500;
-    white-space: nowrap;
-}
-
-/* Overlay */
-.edit-file-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgb(0 0 0 / 50%);
-    backdrop-filter: blur(4px);
-    z-index: 10000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    visibility: hidden;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    padding: 20px;
-    box-sizing: border-box;
-}
-
-.edit-file-overlay_open {
-    opacity: 1;
-    visibility: visible;
-}
-
-/* Popover */
-.edit-file-popover {
-    background: white;
-    border-radius: 16px;
-    box-shadow: 0 20px 60px rgb(0 0 0 / 20%), 0 8px 24px rgb(0 0 0 / 15%);
-    width: 100%;
-    max-width: 900px;
-    max-height: 90vh;
-    display: flex;
-    flex-direction: column;
-    transform: scale(0.9) translateY(20px);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    overflow: hidden;
-}
-
-.edit-file-popover_open {
-    transform: scale(1) translateY(0);
-}
-
-/* Popover Header */
-.edit-file-header {
-    padding: 24px 24px 20px;
-    border-bottom: 1px solid #e5e7ea;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 16px;
-    background: linear-gradient(180deg, #fafbfc 0%, #f7f9fb 100%);
-    position: relative;
-}
-
-.edit-file-title {
-    margin: 0;
-    font-size: 24px;
-    font-weight: 700;
-    color: #181818;
-    letter-spacing: -0.02em;
-}
-
-.edit-file-filename {
-    margin: 8px 0 0;
-    font-size: 14px;
-    color: #706e6b;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-weight: 500;
-}
-
-.edit-file-file-icon {
-    width: 16px;
-    height: 16px;
-    color: #0176d3;
-}
-
-.edit-file-close {
-    width: 40px;
-    height: 40px;
-    border: none;
-    background: transparent;
-    border-radius: 10px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    color: #706e6b;
-    flex-shrink: 0;
-}
-
-.edit-file-close:hover {
-    background: #f3f3f3;
-    color: #181818;
-    transform: scale(1.05);
-}
-
-.edit-file-close-icon {
-    width: 20px;
-    height: 20px;
-}
-
-/* Popover Content */
-.edit-file-content {
-    flex: 1;
-    padding: 24px;
-    overflow-y: auto;
-    min-height: 0;
-}
-
-/* Loading State */
-.edit-file-loading {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 60px 20px;
-    gap: 16px;
-}
-
-.edit-file-spinner {
-    width: 32px;
-    height: 32px;
-    border: 3px solid #e5e7ea;
-    border-top: 3px solid #0176d3;
-    border-radius: 50%;
-    animation: edit-file-spin 1s linear infinite;
-}
-
-.edit-file-loading-text {
-    margin: 0;
-    color: #706e6b;
-    font-size: 16px;
-    font-weight: 500;
-}
-
-/* Error State */
-.edit-file-error {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 16px 20px;
-    background: #fef7f7;
-    border: 1px solid #fecaca;
-    border-radius: 12px;
-    color: #dc2626;
-    margin-bottom: 20px;
-}
-
-.edit-file-error-icon {
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-}
-
-.edit-file-error-text {
-    font-size: 14px;
-    font-weight: 500;
-}
-
-/* Editor */
-.edit-file-editor {
-    width: 100%;
-}
-
-.edit-file-label {
-    display: block;
-    margin-bottom: 8px;
-    font-size: 14px;
-    font-weight: 600;
-    color: #181818;
-}
-
-.edit-file-textarea {
-    width: 100%;
-    min-height: 400px;
-    padding: 16px;
-    border: 2px solid #e5e7ea;
-    border-radius: 12px;
-    font-family: "SF Mono", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
-    font-size: 14px;
-    line-height: 1.5;
-    resize: vertical;
-    outline: none;
-    background: #fafbfc;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    box-sizing: border-box;
-}
-
-.edit-file-textarea:focus {
-    border-color: #0176d3;
-    background: white;
-    box-shadow: 0 0 0 3px rgb(1 118 211 / 10%);
-}
-
-.edit-file-textarea::placeholder {
-    color: #9ca3af;
-}
-
-/* Popover Footer */
-.edit-file-footer {
-    padding: 20px 24px 24px;
-    border-top: 1px solid #e5e7ea;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-    background: linear-gradient(180deg, #fafbfc 0%, #f7f9fb 100%);
-}
-
-/* Status Indicators */
-.edit-file-status {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-    font-weight: 500;
-}
-
-.edit-file-saving {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: #0176d3;
-}
-
-.edit-file-mini-spinner {
-    width: 16px;
-    height: 16px;
-    border: 2px solid #e5e7ea;
-    border-top: 2px solid #0176d3;
-    border-radius: 50%;
-    animation: edit-file-spin 1s linear infinite;
-}
-
-.edit-file-unchanged {
-    color: #706e6b;
-}
-
-.edit-file-modified {
-    color: #059669;
-    position: relative;
-}
-
-.edit-file-modified::before {
-    content: "●";
-    margin-right: 6px;
-    color: #059669;
-}
-
-/* Action Buttons */
-.edit-file-actions {
-    display: flex;
-    gap: 12px;
-}
-
-.edit-file-button {
-    padding: 12px 24px;
-    border-radius: 10px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    border: none;
-    white-space: nowrap;
-}
-
-.edit-file-button_secondary {
-    background: #f3f3f3;
-    color: #181818;
-    border: 1px solid #e5e7ea;
-}
-
-.edit-file-button_secondary:hover:not(:disabled) {
-    background: #e5e7ea;
-    transform: translateY(-1px);
-}
-
-.edit-file-button_primary {
-    background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
-    color: white;
-}
-
-.edit-file-button_primary:hover:not(:disabled) {
-    background: linear-gradient(135deg, #005fb2 0%, #003e73 100%);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgb(1 118 211 / 25%);
-}
-
-.edit-file-button_disabled {
-    background: #d8dde6 !important;
-    color: #706e6b !important;
-    cursor: not-allowed !important;
-    transform: none !important;
-    box-shadow: none !important;
-}
-
-.edit-file-button:disabled {
-    background: #d8dde6;
-    color: #706e6b;
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: none;
-}
-
-.edit-file-button-spinner {
-    width: 16px;
-    height: 16px;
-    border: 2px solid transparent;
-    border-top: 2px solid currentColor;
-    border-radius: 50%;
-    animation: edit-file-spin 1s linear infinite;
-}
-
-/* Animations */
-@keyframes edit-file-spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .edit-file-trigger {
-        padding: 10px 14px;
-        font-size: 13px;
-    }
-
-    .edit-file-trigger-text {
-        display: none;
-    }
-
-    .edit-file-overlay {
-        padding: 16px;
-    }
-
-    .edit-file-popover {
-        max-width: 100%;
-        max-height: 95vh;
-    }
-
-    .edit-file-header {
-        padding: 20px 20px 16px;
-    }
-
-    .edit-file-title {
-        font-size: 20px;
-    }
-
-    .edit-file-content {
-        padding: 20px;
-    }
-
-    .edit-file-textarea {
-        min-height: 300px;
-        font-size: 13px;
-    }
-
-    .edit-file-footer {
-        padding: 16px 20px 20px;
-        flex-direction: column;
-        align-items: stretch;
-        gap: 12px;
-    }
-
-    .edit-file-actions {
-        width: 100%;
-        justify-content: stretch;
-    }
-
-    .edit-file-button {
-        flex: 1;
-        justify-content: center;
-    }
-}
-
-@media (max-width: 480px) {
-    .edit-file-trigger {
-        padding: 8px 12px;
-    }
-
-    .edit-file-overlay {
-        padding: 12px;
-    }
-
-    .edit-file-header {
-        padding: 16px;
-    }
-
-    .edit-file-title {
-        font-size: 18px;
-    }
-
-    .edit-file-content {
-        padding: 16px;
-    }
-
-    .edit-file-footer {
-        padding: 12px 16px 16px;
-    }
-
-    .edit-file-textarea {
-        min-height: 250px;
-        padding: 12px;
-    }
-}
-
-/* Accessibility improvements */
-@media (prefers-reduced-motion: reduce) {
-    .edit-file-trigger,
-    .edit-file-overlay,
-    .edit-file-popover,
-    .edit-file-close,
-    .edit-file-button,
-    .edit-file-textarea {
-        transition: none;
-    }
-
-    .edit-file-spinner,
-    .edit-file-mini-spinner,
-    .edit-file-button-spinner {
-        animation: none;
-    }
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-    .edit-file-trigger {
-        border: 2px solid;
-    }
-
-    .edit-file-popover {
-        border: 2px solid #000;
-    }
-
-    .edit-file-textarea {
-        border: 2px solid #000;
-    }
-
-    .edit-file-button {
-        border: 2px solid;
-    }
-}