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

Agentman Chat Widget for easy integration with web applications

export declare const messageStyles = "\n  .am-message {\n    margin-bottom: 12px;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    width: 100%;\n  }\n\n  .am-message.user {\n    margin-top: 0px;\n    margin-bottom: 12px;\n  }\n\n  .am-message-content {\n    padding: 0;\n    border-radius: 0;\n    font-size: 14px;\n    width: 100%;\n    word-wrap: break-word;\n    line-height: 1.6;\n    background: none;\n    border: none;\n  }\n\n  .am-message.agent .am-message-content {\n    color: var(--chat-agent-foreground-color, var(--chat-text-color, #111827));\n  }\n\n  .am-message.user .am-message-content {\n    color: var(--chat-user-foreground-color, var(--chat-text-color, #111827));\n  }\n\n  /* Role labels */\n  .am-message-role {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6b7280;\n    margin-bottom: 8px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n\n  .am-message.agent .am-message-role {\n    color: #111827;\n  }\n\n  .am-message.user .am-message-role {\n    color: #2563eb;\n  }\n\n  // Content formatting - Reduce spacing\n  .am-message.agent .am-message-content br {\n    content: \"\";\n    display: block;\n    margin-top: 0.2em;\n  }\n\n  .am-message-avatar {\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    margin-top: 4px;\n  }\n\n  .am-message-avatar img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n  }\n\n  .am-message.user .am-message-avatar {\n    width: 28px;\n    height: 28px;\n    margin-top: 16px;\n  }\n  \n\n  /* Typography and spacing */\n  .am-message-content p {\n    margin: 0 0 8px 0;\n  }\n\n  .am-message-content p:last-child {\n    margin-bottom: 0;\n  }  \n\n  /* Enhanced Lists styling */\n  .am-message-content ul,\n  .am-message-content ol {\n    margin: 4px 0;\n    padding-left: 20px;\n    list-style-position: outside;\n  }\n\n  .am-message-content ul {\n    list-style-type: disc;\n  }\n\n  .am-message-content ol {\n    list-style-type: decimal;\n  }\n\n  /* Nested lists */\n  .am-message-content ul ul,\n  .am-message-content ol ul {\n    list-style-type: circle;\n  }\n\n  .am-message-content ul ul ul,\n  .am-message-content ol ul ul {\n    list-style-type: square;\n  }\n\n  .am-message-content ol ol,\n  .am-message-content ul ol {\n    list-style-type: lower-alpha;\n  }\n\n  .am-message-content ol ol ol,\n  .am-message-content ul ol ol {\n    list-style-type: lower-roman;\n  }\n\n  .am-message-content li {\n    margin: 4px 0;\n    padding-left: 4px;\n    line-height: 1.4;\n    display: list-item; /* Ensures list markers are visible */\n  }\n\n  /* Remove margins for nested lists */\n  .am-message-content li > ul,\n  .am-message-content li > ol {\n    margin: 2px 0;\n  }\n\n  /* Links styling */\n  .am-message-content a {\n    color: #2563eb;\n    text-decoration: none;\n    font-weight: 500;\n  }\n\n  .am-message.user .am-message-content a {\n    color: inherit;\n  }\n\n  .am-message-content a:hover {\n    text-decoration: underline;\n  }\n\n  /* Strong and emphasis */\n  .am-message-content strong {\n    font-weight: 600;\n  }\n\n  .am-message-content em {\n    font-style: italic;\n  }  \n\n  .am-message-content h1,\n  .am-message-content h2,\n  .am-message-content h3,\n  .am-message-content h4,\n  .am-message-content h5,\n  .am-message-content h6 {\n    font-weight: 500;\n    line-height: 1.3;\n    margin: 16px 0 8px 0;  \n  }\n\n  .am-message-content h2,\n  .am-message-content h3 {\n    margin-top: 24px;  /* More space above section headers */\n    margin-bottom: 12px;  /* More space below before content */\n  }  \n\n  .am-message-content h1 { font-size: 1.4em; }\n  .am-message-content h2 { font-size: 1.3em; }\n  .am-message-content h3 { font-size: 1.2em; }\n  .am-message-content h4 { font-size: 1.1em; }\n  .am-message-content h5 { font-size: 1em; }\n  .am-message-content h6 { font-size: 0.9em; }\n\n  /* Ensure first and last headings don't add extra spacing */\n  .am-message-content > h1:first-child,\n  .am-message-content > h2:first-child,\n  .am-message-content > h3:first-child,\n  .am-message-content > h4:first-child,\n  .am-message-content > h5:first-child,\n  .am-message-content > h6:first-child {\n    margin-top: 0;\n  }\n\n  .am-message-content > h1:last-child,\n  .am-message-content > h2:last-child,\n  .am-message-content > h3:last-child,\n  .am-message-content > h4:last-child,\n  .am-message-content > h5:last-child,\n  .am-message-content > h6:last-child {\n    margin-bottom: 0;\n  }\n\n  /* Add space after paragraphs */\n  .am-message-content p + h1,\n  .am-message-content p + h2,\n  .am-message-content p + h3,\n  .am-message-content p + h4,\n  .am-message-content p + h5,\n  .am-message-content p + h6 {\n    margin-top: 24px;  /* More space when heading follows paragraph */\n  }  \n\n  /* Adjust list spacing after headers */\n  .am-message-content h1 + ul,\n  .am-message-content h2 + ul,\n  .am-message-content h3 + ul,\n  .am-message-content h4 + ul,\n  .am-message-content h5 + ul,\n  .am-message-content h6 + ul {\n    margin-top: 12px;\n  }\n\n\n  /* Code blocks */\n  .am-message-content code {\n    background: rgba(0, 0, 0, 0.05);\n    padding: 2px 4px;\n    border-radius: 4px;\n    font-family: monospace;\n    font-size: 0.9em;\n  }\n\n  .am-message-content pre {\n    background: rgba(0, 0, 0, 0.05);\n    padding: 12px;\n    border-radius: 8px;\n    overflow-x: auto;\n    margin: 8px 0;\n  }\n\n  .am-message-content pre code {\n    background: none;\n    padding: 0;\n  }\n\n  /* Markdown image styling */\n  .am-message-image-container {\n    margin: 12px 0;\n    max-width: 100%;\n    text-align: left;\n  }\n\n  .am-message-image {\n    max-width: min(100%, 320px);  /* Fluid but capped */\n    max-height: 300px;\n    width: auto;\n    height: auto;\n    display: block;\n    border-radius: 8px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    cursor: pointer;\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n    object-fit: contain;  /* Better than cover for content visibility */\n  }\n\n  .am-message-image:hover {\n    transform: scale(1.02);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  }\n\n  /* Mobile responsiveness */\n  @media (max-width: 480px) {\n    .am-message-image {\n      max-width: 100%;\n      max-height: 250px;\n    }\n  }\n\n  /* Loading state */\n  .am-message-image:not([src]), \n  .am-message-image[src=\"\"] {\n    background: #f3f4f6;\n    min-height: 100px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .am-message-image:not([src]):before,\n  .am-message-image[src=\"\"]:before {\n    content: \"Loading image...\";\n    color: #666;\n    font-size: 14px;\n  }\n\n  /* Fallback for any images not wrapped (safety net) */\n  .am-message-content img:not(.am-message-image) {\n    max-width: 100%;\n    max-height: 300px;\n    height: auto;\n    display: block;\n    margin: 8px 0;\n    border-radius: 8px;\n  }\n\n  /* Blockquotes */\n  .am-message-content blockquote {\n    border-left: 4px solid #2563eb;\n    margin: 8px 0;\n    padding: 4px 12px;\n    color: #4b5563;\n  }\n\n  /* Tables */\n  .am-message-content table {\n    border-collapse: collapse;\n    width: 100%;\n    margin: 8px 0;\n  }\n\n  .am-message-content th,\n  .am-message-content td {\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    padding: 8px;\n    text-align: left;\n  }\n\n  .am-message-content th {\n    background: rgba(0, 0, 0, 0.05);\n    font-weight: 600;\n  }\n\n  /* Remove margin top from first element */\n  .am-message-content > *:first-child {\n    margin-top: 0;\n  }\n\n  /* Remove margin bottom from last element */\n  .am-message-content > *:last-child {\n    margin-bottom: 0;\n  }\n\n\n  @media (max-width: 480px) {\n    .am-message-content {\n      font-size: 13px;\n      padding: 10px 14px;\n    }\n    \n    .am-message-content ul,\n    .am-message-content ol {\n      padding-left: 20px;\n    }\n  }\n\n  /* Input component styles moved to input.ts */\n";