@agentman/chat-widget/dist/assistantWidget/styles/attachments.d.ts

Agentman Chat Widget for easy integration with web applications

export declare const attachmentStyles = "\n  /* File attachment button */\n  .chat-attachment-button {\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--chat-text-color);\n    opacity: 0.7;\n    transition: opacity 0.2s;\n  }\n\n  .chat-attachment-button:hover {\n    opacity: 1;\n  }\n\n  .chat-attachment-button svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  /* Hidden file input */\n  .chat-file-input {\n    display: none;\n  }\n\n  /* Attachment preview container - STACKED: Full width row above input */\n  .chat-attachments-preview {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n    padding: 12px 16px;\n    overflow-x: auto;\n    overflow-y: hidden;\n    position: relative;\n    width: 100%;\n    background: rgba(0, 0, 0, 0.02);\n    border-bottom: none;\n    \n    /* Custom scrollbar */\n    scrollbar-width: thin;\n    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;\n  }\n\n  .chat-attachments-preview::-webkit-scrollbar {\n    height: 4px;\n  }\n\n  .chat-attachments-preview::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  .chat-attachments-preview::-webkit-scrollbar-thumb {\n    background: rgba(0, 0, 0, 0.2);\n    border-radius: 2px;\n  }\n\n  .chat-attachments-preview::-webkit-scrollbar-thumb:hover {\n    background: rgba(0, 0, 0, 0.3);\n  }\n\n  /* Scroll hint indicator */\n  .chat-attachments-preview::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 20px;\n    background: linear-gradient(to left, rgba(0, 0, 0, 0.02), transparent);\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.3s;\n  }\n\n  .chat-attachments-preview.has-overflow::after {\n    opacity: 1;\n  }\n\n  /* Individual attachment item - MINIMAL: Clean thumbnail design */\n  .chat-attachment-item {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    background: rgba(255, 255, 255, 0.8);\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 8px;\n    padding: 8px;\n    animation: slideIn 0.2s ease-out;\n    width: 40%;\n    flex-shrink: 0;\n    cursor: default;\n    transition: all 0.2s;\n    gap: 10px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n  }\n\n  .chat-attachment-item:hover {\n    background: rgba(255, 255, 255, 0.95);\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n  }\n\n  @keyframes slideIn {\n    from {\n      opacity: 0;\n      transform: translateY(-10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* Attachment thumbnail for images - MINIMAL: Larger preview */\n  .chat-attachment-thumbnail {\n    width: 40px;\n    height: 40px;\n    object-fit: cover;\n    border-radius: 6px;\n    flex-shrink: 0;\n  }\n\n  /* File icon for non-images - MINIMAL: Larger icon area */\n  .chat-attachment-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(59, 130, 246, 0.08);\n    border-radius: 6px;\n    flex-shrink: 0;\n  }\n\n  .chat-attachment-icon svg {\n    width: 20px;\n    height: 20px;\n    opacity: 0.6;\n    color: rgba(59, 130, 246, 0.7);\n  }\n\n  /* Attachment info - HORIZONTAL: Left-aligned for inline layout */\n  .chat-attachment-info {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .chat-attachment-name {\n    font-size: 13px;\n    font-weight: 400;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    line-height: 1.3;\n    color: rgba(0, 0, 0, 0.7);\n  }\n\n  /* Remove button - MINIMAL: Subtle \u00D7 in top-right corner */\n  .chat-attachment-remove {\n    position: absolute;\n    top: 4px;\n    right: 4px;\n    width: 18px;\n    height: 18px;\n    background: rgba(0, 0, 0, 0.05);\n    color: rgba(0, 0, 0, 0.4);\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 14px;\n    font-weight: normal;\n    line-height: 1;\n    transition: all 0.2s;\n    padding: 0;\n  }\n\n  .chat-attachment-remove:hover {\n    background: rgba(0, 0, 0, 0.1);\n    color: rgba(0, 0, 0, 0.6);\n  }\n\n  .chat-attachment-remove:active {\n    transform: scale(0.9);\n  }\n\n  /* Upload progress - HORIZONTAL: Bottom overlay for inline layout */\n  .chat-attachment-progress {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 2px;\n    background: rgba(0, 0, 0, 0.1);\n    border-radius: 0 0 6px 6px;\n    overflow: hidden;\n  }\n\n  .chat-attachment-progress-bar {\n    height: 100%;\n    background: linear-gradient(90deg, #3b82f6, #2563eb);\n    transition: width 0.3s ease;\n    border-radius: 2px;\n    position: relative;\n  }\n\n  .chat-attachment-progress-bar::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n    animation: shimmer 1.5s infinite;\n  }\n\n  @keyframes shimmer {\n    0% { transform: translateX(-100%); }\n    100% { transform: translateX(100%); }\n  }\n\n  /* Error state */\n  .chat-attachment-item.error {\n    background: rgba(255, 0, 0, 0.1);\n  }\n\n  .chat-attachment-item.error .chat-attachment-name {\n    color: #ff0000;\n  }\n\n  /* Attachments in messages - matches upload preview styling */\n  .chat-message-attachments {\n    margin-top: 12px;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n\n  /* File attachment card - matches chat-attachment-item styling */\n  .chat-message-attachment {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    background: rgba(255, 255, 255, 0.8);\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 8px;\n    padding: 8px;\n    text-decoration: none;\n    color: inherit;\n    transition: all 0.2s;\n    gap: 10px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n    min-width: 200px;\n    max-width: 300px;\n  }\n\n  .chat-message-attachment:hover {\n    background: rgba(255, 255, 255, 0.95);\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n    text-decoration: none;\n  }\n\n  .message-attachment-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(59, 130, 246, 0.08);\n    border-radius: 6px;\n    flex-shrink: 0;\n  }\n\n  .message-attachment-icon svg {\n    width: 20px;\n    height: 20px;\n    color: rgb(59, 130, 246);\n  }\n\n  /* Image attachments display */\n  .message-attachment-image {\n    max-width: 300px;\n    max-height: 200px;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: transform 0.2s;\n    display: block;\n    width: 100%;\n    height: auto;\n    object-fit: cover;\n  }\n\n  .message-attachment-image:hover {\n    transform: scale(1.02);\n  }\n\n  .chat-attachment-info {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n  }\n\n  .chat-attachment-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--chat-text-color);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .chat-attachment-size {\n    font-size: 11px;\n    color: var(--chat-text-secondary, rgba(0, 0, 0, 0.5));\n  }\n\n  .chat-attachment-expired {\n    font-size: 11px;\n    color: #dc2626;\n    font-style: italic;\n  }\n\n  /* File type icons */\n  .icon-file-document::before {\n    content: \"\uD83D\uDCC4\";\n    font-size: 20px;\n  }\n\n  .icon-file-image::before {\n    content: \"\uD83D\uDDBC\uFE0F\";\n    font-size: 20px;\n  }\n\n  .icon-file-audio::before {\n    content: \"\uD83C\uDFB5\";\n    font-size: 20px;\n  }\n\n  .icon-file-video::before {\n    content: \"\uD83C\uDFAC\";\n    font-size: 20px;\n  }\n\n  .icon-file-data::before {\n    content: \"\uD83D\uDCCA\";\n    font-size: 20px;\n  }\n\n  .icon-file-text::before {\n    content: \"\uD83D\uDCDD\";\n    font-size: 20px;\n  }\n\n  /* Responsive adjustments - HORIZONTAL: Better mobile experience */\n  @media (max-width: 480px) {\n    .chat-attachments-preview {\n      padding: 6px 0;\n      gap: 6px;\n    }\n\n    .chat-attachment-item {\n      width: 45%;\n      padding: 4px 6px;\n      gap: 6px;\n    }\n\n    .chat-attachment-thumbnail,\n    .chat-attachment-icon {\n      width: 36px;\n      height: 36px;\n    }\n\n    .chat-attachment-icon svg {\n      width: 18px;\n      height: 18px;\n    }\n\n    .chat-attachment-name {\n      font-size: 12px;\n    }\n\n    .chat-attachment-remove {\n      width: 16px;\n      height: 16px;\n      top: 2px;\n      right: 2px;\n      font-size: 12px;\n    }\n  }\n\n  /* Extra improvements for very wide screens */\n  @media (min-width: 768px) {\n    .chat-attachment-item {\n      padding: 10px;\n    }\n\n    .chat-attachment-thumbnail,\n    .chat-attachment-icon {\n      width: 44px;\n      height: 44px;\n    }\n\n    .chat-attachment-name {\n      font-size: 13px;\n    }\n  }\n";
export declare const attachmentIcons: {
    paperclip: string;
    document: string;
    image: string;
    audio: string;
    video: string;
    file: string;
    close: string;
};