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

Agentman Chat Widget for easy integration with web applications

export declare const conversationStyles = "\n  /* Conversation List View (replaces entire chat area - messages and input) */\n  .am-conversation-list-view {\n    display: none;\n    flex-direction: column;\n    flex: 1;\n    background: var(--chat-background-color, #ffffff);\n    overflow: hidden;\n    position: absolute;\n    top: 0; /* Start from top since it has its own header */\n    left: 0;\n    right: 0;\n    bottom: 0; /* Full height */\n    transform: translateX(100%);\n    transition: transform 0.3s ease-in-out;\n    z-index: 10; /* Ensure it's above chat content when open */\n  }\n\n  /* Conversation List Header */\n  .am-conversation-list-header {\n    background-color: white;\n    color: #333;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n    height: 54px;\n    flex: 0 0 auto;\n    box-sizing: border-box;\n  }\n\n  .am-conversation-list-header-content {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n  }\n\n  .am-conversation-list-header-left {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .am-conversations-header-actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  /* Back button in conversation list header */\n  .am-conversation-list-header .am-conversation-back {\n    background: none;\n    border: none;\n    padding: 6px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background-color 0.2s;\n    border-radius: 4px;\n    color: #6b7280;\n  }\n\n  .am-conversation-list-header .am-conversation-back:hover {\n    background: rgba(0, 0, 0, 0.05);\n  }\n\n  /* New button in conversation list header */\n  .am-conversation-list-header .am-conversation-new-list {\n    background: transparent;\n    border: none;\n    color: #6b7280;\n    cursor: pointer;\n    padding: 6px 8px;\n    border-radius: 4px;\n    font-size: 16px;\n    transition: background-color 0.2s;\n    display: flex !important;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .am-conversation-list-header .am-conversation-new-list .am-button-label {\n    color: #6b7280;\n  }\n\n  .am-conversation-list-header .am-conversation-new-list:hover {\n    background: rgba(0, 0, 0, 0.05);\n  }\n\n  /* Minimize button in conversation list header */\n  .am-conversation-list-header .am-chat-minimize-list {\n    background: none;\n    border: none;\n    padding: 6px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background-color 0.2s;\n    border-radius: 4px;\n    color: #6b7280;\n  }\n\n  .am-conversation-list-header .am-chat-minimize-list:hover {\n    background: rgba(0, 0, 0, 0.05);\n  }\n\n  /* Animation states */\n  .am-conversation-list-view.opening {\n    display: flex;\n    transform: translateX(0);\n  }\n\n  .am-conversation-list-view.closing {\n    transform: translateX(100%);\n  }\n\n  /* Chat area animation */\n  .am-chat-messages,\n  .am-chat-input-prompts,\n  .am-chat-input-container,\n  .chat-attachments-preview {\n    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n  }\n\n  .am-chat-messages.sliding-out,\n  .am-chat-input-prompts.sliding-out,\n  .am-chat-input-container.sliding-out,\n  .chat-attachments-preview.sliding-out {\n    transform: translateX(-100%);\n    opacity: 0;\n  }\n\n  .am-conversation-list-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n  }\n\n  /* New conversation button in header */\n  .am-conversation-new-header {\n    background: transparent;\n    border: none;\n    color: var(--chat-header-text-color, #ffffff);\n    cursor: pointer;\n    padding: 6px 8px;\n    border-radius: 4px;\n    font-size: 16px;\n    transition: background-color 0.2s;\n  }\n\n  .am-conversation-new-header:hover {\n    background: rgba(255, 255, 255, 0.1) !important;\n  }\n\n  /* Header buttons with text labels */\n  .am-header-button-with-text {\n    display: flex !important;\n    align-items: center;\n    gap: 4px;\n    padding: 0 0px !important;\n    min-width: auto !important;\n  }\n\n  .am-header-button-with-text svg {\n    width: 18px;\n    height: 18px;\n    flex-shrink: 0;\n  }\n\n  .am-button-label {\n    font-size: 12px;\n    font-weight: 400;\n    color: inherit;\n    white-space: nowrap;\n  }\n\n  /* Conversation indicator - small dot to show there are conversations */\n  .am-conversation-indicator {\n    position: absolute;\n    top: 6px;\n    right: 6px;\n    width: 5px;\n    height: 5px;\n    background-color: var(--chat-button-color, #2563eb);\n    border-radius: 50%;\n    display: none; /* Hide for now since we have text labels */\n  }\n\n  .am-conversation-toggle {\n    position: relative;\n  }\n\n  /* Header divider */\n  .am-header-divider {\n    width: 1px;\n    height: 24px;\n    background-color: #111827;\n    opacity: 0.15;\n    margin: 0 4px;\n    flex-shrink: 0;\n  }\n\n  /* Conversation List */\n  .am-conversation-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0;\n  }\n\n  .am-conversation-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 20px;\n    border-bottom: 1px solid #f3f4f6;\n    cursor: pointer;\n    transition: background-color 0.2s;\n  }\n\n  .am-conversation-item:hover {\n    background: #f9fafb;\n  }\n\n  .am-conversation-item.active {\n    background: #eff6ff;\n    border-left: 3px solid var(--chat-button-color, #2563eb);\n  }\n\n  .am-conversation-info {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .am-conversation-title {\n    font-weight: 500;\n    font-size: 14px;\n    color: #111827;\n    margin-bottom: 4px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .am-conversation-date {\n    font-size: 12px;\n    color: #6b7280;\n  }\n\n  .am-conversation-actions {\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s;\n  }\n\n  .am-conversation-item:hover .am-conversation-actions {\n    opacity: 1;\n  }\n\n  .am-conversation-delete {\n    background: transparent;\n    border: none;\n    color: #dc2626;\n    cursor: pointer;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 14px;\n    font-weight: bold;\n    transition: background-color 0.2s;\n  }\n\n  .am-conversation-delete:hover {\n    background: #fef2f2;\n  }\n\n  /* Empty State */\n  .am-conversation-empty {\n    padding: 40px 20px;\n    text-align: center;\n    color: #6b7280;\n  }\n\n  .am-conversation-empty p {\n    margin: 0 0 16px 0;\n    font-size: 14px;\n  }\n\n  .am-conversation-new-button {\n    background: var(--chat-button-color, #2563eb);\n    color: var(--chat-button-text-color, #ffffff);\n    border: none;\n    padding: 8px 16px;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: background-color 0.2s;\n  }\n\n  .am-conversation-new-button:hover {\n    background: var(--chat-button-hover-color, #047857);\n  }\n\n  /* Header Navigation Buttons */\n  .am-conversation-toggle,\n  .am-conversation-back {\n    background: transparent;\n    border: none;\n    color: var(--chat-header-text-color, #ffffff);\n    cursor: pointer;\n    padding: 6px 8px;\n    border-radius: 4px;\n    font-size: 16px;\n    transition: background-color 0.2s;\n  }\n\n  .am-conversation-toggle:hover,\n  .am-conversation-back:hover {\n    background: rgba(255, 255, 255, 0.1);\n  }\n\n  .am-conversation-back {\n    font-size: 18px;\n    font-weight: bold;\n  }\n\n  /* Mobile Responsiveness */\n  @media (max-width: 768px) {\n    .am-conversation-drawer {\n      width: 280px;\n      left: -300px;\n    }\n    \n    .am-conversation-manager.open .am-conversation-drawer {\n      left: 0;\n    }\n  }\n\n  /* Overlay for mobile */\n  .am-conversation-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 0, 0, 0.5);\n    display: none;\n    z-index: 1000;\n  }\n\n  .am-conversation-manager.open .am-conversation-overlay {\n    display: block;\n  }\n\n  @media (max-width: 768px) {\n    .am-conversation-overlay {\n      display: none;\n    }\n    \n    .am-conversation-manager.open .am-conversation-overlay {\n      display: block;\n    }\n  }\n";