@solidxai/core-ui 0.1.18 → 0.1.19-beta.1

package/dist/components/core/solid-agent/widgets/solidChatWidgets.module.css

@@ -0,0 +1,909 @@
+/* Chat widget styles, ported from the SolidX agent-ui chat (SolidAiChat.module.css) so the
+   default chat widgets look the same. Colours come from the Solid theme variables. */
+
+/* ── AI turn group, rows, avatars, bubbles, meta, copy button ── */
+.AiTurnGroup {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    /* max-width: 800px; */
+    width: 100%;
+}
+
+.AiTurnContent {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    flex: 1;
+    min-width: 0;
+}
+
+/* ── Per-turn activity disclosure ── */
+.ActivityGroup {
+    width: 100%;
+    min-width: 0;
+}
+
+.ActivityTimerOnly {
+    display: contents;
+}
+
+.ActivitySummary {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    min-height: 24px;
+    padding: 2px 6px;
+    border: 0;
+    background: transparent;
+    color: var(--solid-agent-muted-fg);
+    text-align: left;
+    font: inherit;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background-color .15s ease, color .15s ease;
+}
+
+.ActivitySummary:hover,
+.ActivitySummary:focus-visible {
+    color: var(--solid-agent-fg);
+}
+
+.ActivitySummary:hover {
+    background: color-mix(in srgb, var(--solid-agent-primary) 6%, transparent);
+}
+
+.ActivitySummary:focus-visible {
+    outline: 2px solid var(--solid-agent-primary);
+    outline-offset: 2px;
+    border-radius: 5px;
+}
+
+.ActivitySummaryText {
+    flex: 1;
+    min-width: 0;
+    color: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.4;
+}
+
+.ActivitySpinner,
+.ActivityComplete {
+    flex: 0 0 auto;
+}
+
+.ActivitySpinner {
+    color: var(--solid-agent-primary);
+    animation: activitySpin .9s linear infinite;
+}
+
+.ActivityComplete {
+    color: var(--solid-agent-success, #16a34a);
+}
+
+.ActivityChevron {
+    flex: 0 0 auto;
+    color: var(--solid-agent-muted);
+    transition: transform .18s ease;
+}
+
+.ActivityChevronOpen {
+    transform: rotate(180deg);
+}
+
+.ActivityDetails {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 2px 0 3px 7px;
+    padding: 2px 0 2px 9px;
+    border-left: 1px solid var(--solid-agent-border);
+}
+
+@keyframes activitySpin {
+    to { transform: rotate(360deg); }
+}
+
+/* ── Message rows ── */
+.Row {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    max-width: 800px;
+    width: 100%;
+}
+
+.RowUser {
+    flex-direction: row-reverse;
+    align-self: flex-end;
+    margin-left: auto;
+}
+
+.RowUser .BubbleGroup {
+    max-width: min(88%, 680px);
+}
+
+.RowAssistant {
+    flex-direction: row;
+    align-self: flex-start;
+}
+
+/* ── Avatar ── */
+.Avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 7px;
+    background: var(--solid-agent-accent);
+    border: 1px solid var(--solid-agent-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--solid-agent-fg);
+    flex-shrink: 0;
+    margin-top: 2px;
+}
+
+.AvatarAi {
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+}
+
+.AvatarUser {
+    background: var(--solid-agent-fg);
+    color: var(--solid-agent-page);
+    display: none;
+}
+
+/* ── Bubble group ── */
+.BubbleGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    max-width: calc(100%);
+}
+
+.Bubble {
+    border-radius: 14px;
+    padding: 8px 12px;
+    line-height: 1.55;
+    word-break: break-word;
+    position: relative;
+}
+
+.BubbleUser {
+    background: var(--solid-agent-fg);
+    border: 1px solid transparent;
+    border-bottom-right-radius: 6px;
+    color: var(--solid-agent-page);
+}
+
+.BubbleAssistant {
+    background: transparent;
+    border: 0;
+    color: var(--solid-agent-fg);
+    padding: 0;
+}
+
+.BubbleStreaming .MarkdownRoot > p,
+.BubbleStreaming .MarkdownRoot > ul,
+.BubbleStreaming .MarkdownRoot > ol,
+.BubbleStreaming .MarkdownRoot > blockquote,
+.BubbleStreaming .MarkdownRoot > h1,
+.BubbleStreaming .MarkdownRoot > h2,
+.BubbleStreaming .MarkdownRoot > h3 {
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(105deg, var(--solid-agent-fg) 0%, var(--solid-agent-fg) 38%, color-mix(in srgb, var(--solid-agent-primary) 58%, white) 50%, var(--solid-agent-fg) 62%, var(--solid-agent-fg) 100%);
+    background-size: 240% 100%;
+    background-position: 100% 0;
+    background-clip: text;
+    -webkit-background-clip: text;
+    animation: responseShimmer 2.8s ease-in-out infinite;
+}
+
+.UserText {
+    font-size: 13px;
+    margin: 0;
+    white-space: pre-wrap;
+}
+
+/* ── Bubble meta ── */
+.BubbleMeta {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    opacity: 0;
+    transition: opacity 0.15s;
+    height: 18px;
+}
+
+.Row:hover .BubbleMeta,
+.AiTurnGroup:hover .BubbleMeta {
+    opacity: 1;
+}
+
+.BubbleMetaUser {
+    flex-direction: row-reverse;
+}
+
+.BubbleMetaAssistant {
+    flex-direction: row;
+}
+
+.Timestamp {
+    font-size: 10px;
+    color: var(--solid-agent-muted);
+}
+
+/* ── Copy button ── */
+.CopyBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--solid-agent-accent);
+    border: 1px solid var(--solid-agent-border);
+    border-radius: 5px;
+    color: var(--solid-agent-muted-fg);
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.CopyBtn:hover {
+    background: var(--solid-agent-fg);
+    color: var(--solid-agent-page);
+    border-color: var(--solid-agent-fg);
+}
+
+/* ── Markdown, inline code, code blocks ── */
+.MarkdownRoot {
+    font-size: inherit;
+    font-family: inherit;
+    line-height: 1.55;
+    color: inherit;
+}
+
+.MarkdownRoot>*:first-child {
+    margin-top: 0 !important;
+}
+
+.MarkdownRoot>*:last-child {
+    margin-bottom: 0 !important;
+}
+
+.MarkdownRoot p {
+    margin: 0 0 6px;
+}
+
+.MarkdownRoot p:last-child {
+    margin-bottom: 0;
+}
+
+.MarkdownRoot h1,
+.MarkdownRoot h2,
+.MarkdownRoot h3 {
+    font-weight: 600;
+    margin: 12px 0 4px;
+    color: inherit;
+    line-height: 1.3;
+}
+
+.MarkdownRoot h1 {
+    font-size: 1.15em;
+}
+
+.MarkdownRoot h2 {
+    font-size: 1.05em;
+}
+
+.MarkdownRoot h3 {
+    font-size: 1em;
+    opacity: 0.85;
+}
+
+.MarkdownRoot ul,
+.MarkdownRoot ol {
+    padding-left: 18px;
+    margin: 5px 0;
+}
+
+.MarkdownRoot li {
+    margin: 3px 0;
+    line-height: 1.55;
+}
+
+.MarkdownRoot li>p {
+    margin: 0;
+}
+
+.MarkdownRoot blockquote {
+    border-left: 2px solid var(--solid-agent-border);
+    padding: 4px 11px;
+    margin: 8px 0;
+    color: var(--solid-agent-muted-fg);
+    font-style: italic;
+}
+
+.MarkdownRoot a,
+.MarkdownLink {
+    color: var(--solid-agent-fg);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    cursor: pointer;
+    transition: opacity 0.15s;
+}
+
+.MarkdownRoot a:hover,
+.MarkdownLink:hover {
+    opacity: 0.72;
+}
+
+.MarkdownRoot hr {
+    border: none;
+    border-top: 1px solid var(--solid-agent-border);
+    margin: 12px 0;
+}
+
+/* ── Markdown table ── */
+.MarkdownTableWrapper {
+    overflow-x: auto;
+    margin: 8px 0;
+    border-radius: 7px;
+    border: 1px solid var(--solid-agent-border);
+}
+
+.MarkdownRoot table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+    margin: 0;
+}
+
+.MarkdownRoot th,
+.MarkdownRoot td {
+    border-bottom: 1px solid var(--solid-agent-border);
+    border-right: 1px solid var(--solid-agent-border);
+    padding: 6px 12px;
+    text-align: left;
+    vertical-align: top;
+}
+
+.MarkdownRoot th:last-child,
+.MarkdownRoot td:last-child {
+    border-right: none;
+}
+
+.MarkdownRoot tr:last-child td {
+    border-bottom: none;
+}
+
+.MarkdownRoot th {
+    background: var(--solid-agent-accent);
+    font-weight: 600;
+    font-size: 12px;
+    color: var(--solid-agent-muted-fg);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+
+.MarkdownRoot td code {
+    font-size: 12px;
+}
+
+/* ── Inline code ── */
+.InlineCode {
+    background: var(--solid-agent-accent);
+    border: 1px solid var(--solid-agent-border);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 12.5px;
+    font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
+    color: var(--solid-agent-fg);
+}
+
+/* ── Code block ── */
+.CodeBlockWrapper {
+    margin: 8px 0;
+    border-radius: 8px;
+    border: 1px solid var(--solid-agent-border);
+    overflow: hidden;
+}
+
+.CodeBlockHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--solid-agent-accent);
+    padding: 5px 11px;
+    border-bottom: 1px solid var(--solid-agent-border);
+}
+
+.CodeLang {
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--solid-agent-muted-fg);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+
+.CodeCopyBtn {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 11px;
+    color: var(--solid-agent-muted-fg);
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: 4px;
+    transition: background 0.15s, color 0.15s;
+}
+
+.CodeCopyBtn:hover {
+    background: var(--solid-agent-accent);
+    color: var(--solid-agent-fg);
+}
+
+.CodePre {
+    margin: 0;
+    padding: 13px;
+    background: var(--solid-agent-accent);
+    overflow-x: auto;
+    font-size: 12.5px;
+    font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
+    line-height: 1.6;
+    color: var(--solid-agent-fg);
+    scrollbar-width: thin;
+    scrollbar-color: var(--solid-agent-border) transparent;
+}
+
+/* ── Tool card ── */
+.ToolCard {
+    border: 0;
+    border-left: 2px solid transparent;
+    border-bottom: 1px solid color-mix(in srgb, var(--solid-agent-border) 65%, transparent);
+    border-radius: 0;
+    overflow: visible;
+    width: 100%;
+    max-width: 100%;
+    transition: border-color 0.15s, background 0.15s, opacity 0.15s;
+    font-size: 13px;
+}
+
+.ToolCardRunning {
+    border-left-color: var(--solid-agent-primary);
+    background: transparent;
+}
+
+.ToolCardDone {
+    background: transparent;
+    opacity: 0.92;
+}
+
+.ToolCardDone:hover {
+    opacity: 1;
+}
+
+.ToolCardWarning {
+    border-left-color: rgb(245, 158, 11);
+    background: transparent;
+}
+
+.ToolCardError {
+    border-left-color: rgb(239, 68, 68);
+    background: transparent;
+}
+
+.ToolCardHeader {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
+    font-size: 13px;
+    flex-wrap: nowrap;
+    min-width: 0;
+}
+
+.ToolCardStatusIcon {
+    font-size: 13px;
+    color: var(--solid-agent-fg);
+    flex-shrink: 0;
+}
+
+.ToolCardStatusDone {
+    color: var(--solid-agent-fg);
+    opacity: 0.5;
+}
+
+.ToolCardStatusWarning {
+    color: rgb(245, 158, 11);
+}
+
+.ToolCardStatusError {
+    color: rgb(239, 68, 68);
+}
+
+.ToolCardToolIcon {
+    font-size: 12px;
+    color: var(--solid-agent-muted-fg);
+    flex-shrink: 0;
+}
+
+.ToolCardName {
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--solid-agent-fg);
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 0 1 auto;
+}
+
+.ToolCardDesc {
+    font-size: 12px;
+    color: var(--solid-agent-muted-fg);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    flex: 1;
+    max-width: 300px;
+}
+
+.ToolCardBadge {
+    font-size: 10px;
+    color: var(--solid-agent-muted-fg);
+    border: 1px solid var(--solid-agent-border);
+    border-radius: 4px;
+    padding: 1px 6px;
+    line-height: 17px;
+    white-space: nowrap;
+    flex-shrink: 0;
+    margin-left: auto;
+}
+
+.ToolCardDuration {
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    color: var(--solid-agent-muted-fg);
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.ToolCardProgress {
+    border-top: 1px solid var(--solid-agent-border);
+    padding: 5px 8px 6px;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    background: transparent;
+}
+
+.ToolProgressItem {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--solid-agent-muted-fg);
+}
+
+.ToolProgressLabel {
+    flex: 1;
+    min-width: 0;
+}
+
+.ToolProgressDuration {
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    color: var(--solid-agent-muted-fg);
+    opacity: 0.7;
+    white-space: nowrap;
+    margin-left: auto;
+}
+
+.ToolProgressRunning {
+    color: var(--solid-agent-fg);
+    font-weight: 500;
+}
+
+.ToolProgressDone {
+    color: var(--solid-agent-muted);
+    opacity: 0.65;
+}
+
+/* ── Tool output preview ── */
+.ToolCardOutput {
+    border-top: 1px solid var(--solid-agent-border);
+    padding: 7px 8px;
+    background: transparent;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.ToolOutputHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--solid-agent-fg);
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+}
+
+.ToolOutputText {
+    font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
+    font-size: 12px;
+    line-height: 1.55;
+    color: var(--solid-agent-fg);
+    white-space: pre-wrap;
+    word-break: break-all;
+    max-height: 300px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    margin: 0;
+}
+
+.ToolOutputWarning {
+    color: var(--solid-warning-text, rgb(180, 83, 9));
+}
+
+.ToolOutputError {
+    color: var(--solid-error-text, rgb(185, 28, 28));
+}
+
+/* ── Thinking bubble and streaming cursor ── */
+.ThinkingBubble {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 6px;
+    background: transparent;
+    border: 0;
+    width: fit-content;
+}
+
+.ThinkingLabel {
+    font-size: 12px;
+    line-height: 1;
+    color: var(--solid-agent-muted-fg);
+    background-image: linear-gradient(100deg, var(--solid-agent-muted-fg) 0%, var(--solid-agent-muted-fg) 35%, var(--solid-agent-primary) 50%, var(--solid-agent-muted-fg) 65%, var(--solid-agent-muted-fg) 100%);
+    background-size: 220% 100%;
+    background-position: 100% 0;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: responseShimmer 2.4s ease-in-out infinite;
+}
+
+.ThinkingSparkle {
+    position: relative;
+    top: 1px;
+    color: var(--solid-agent-primary);
+    animation: sparklePulse 1.8s ease-in-out infinite;
+}
+
+@keyframes responseShimmer {
+    0% { background-position: 100% 0; }
+    100% { background-position: -140% 0; }
+}
+
+@keyframes sparklePulse {
+    0%, 100% { opacity: .55; transform: scale(.92); }
+    50% { opacity: 1; transform: scale(1.08); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ActivitySpinner,
+    .ThinkingLabel,
+    .ThinkingSparkle,
+    .BubbleStreaming .MarkdownRoot > p,
+    .BubbleStreaming .MarkdownRoot > ul,
+    .BubbleStreaming .MarkdownRoot > ol,
+    .BubbleStreaming .MarkdownRoot > blockquote,
+    .BubbleStreaming .MarkdownRoot > h1,
+    .BubbleStreaming .MarkdownRoot > h2,
+    .BubbleStreaming .MarkdownRoot > h3 {
+        animation: none;
+    }
+}
+
+/* ── Streaming cursor ── */
+.StreamingCursor {
+    display: inline-block;
+    width: 2px;
+    height: 14px;
+    background: var(--solid-agent-fg);
+    opacity: 0.6;
+    margin-left: 2px;
+    vertical-align: text-bottom;
+    animation: cursorBlink 0.9s step-start infinite;
+}
+
+@keyframes cursorBlink {
+
+    0%,
+    100% {
+        opacity: 0.6;
+    }
+
+    50% {
+        opacity: 0;
+    }
+}
+
+/* ── Error bubble ── */
+.ErrorBubble {
+    display: flex;
+    gap: 9px;
+    align-items: flex-start;
+}
+
+.ErrorIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    border-radius: 7px;
+    background: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+    flex-shrink: 0;
+    margin-top: 2px;
+}
+
+.ErrorContent {
+    border-radius: 14px;
+    border-bottom-left-radius: 4px;
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    background: rgba(239, 68, 68, 0.05);
+    padding: 9px 13px;
+    max-width: 85%;
+}
+
+.ErrorTitle {
+    font-size: 11px;
+    font-weight: 600;
+    color: #ef4444;
+    margin: 0 0 3px;
+}
+
+.ErrorText {
+    font-size: 13px;
+    color: var(--solid-error-text, rgb(185, 28, 28));
+    margin: 0;
+    line-height: 1.5;
+}
+
+/* ── Tool card header button, chevron, expandable ── */
+.ToolCardHeaderBtn {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    width: 100%;
+    padding: 6px 8px;
+    font-size: 12px;
+    flex-wrap: nowrap;
+    min-width: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    font-family: inherit;
+    color: inherit;
+}
+
+.ToolCardHeaderBtn:not([data-expandable="true"]) {
+    cursor: default;
+}
+
+.ToolCardChevron {
+    font-size: 11px;
+    color: var(--solid-agent-muted-fg);
+    transition: transform 0.2s;
+    flex-shrink: 0;
+    margin-left: 2px;
+}
+
+.ToolCardChevronOpen {
+    transform: rotate(90deg);
+}
+
+.ToolCardExpandable {
+    border-top: 1px solid var(--solid-agent-border);
+    margin-left: 8px;
+}
+
+/* ── Spinner (running tool / progress step) ── */
+.Spin {
+    animation: toolSpin 0.9s linear infinite;
+}
+
+@keyframes toolSpin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* ── Attachments on a sent user message ── */
+.MessageAttachments {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 6px;
+}
+
+.MessageAttachmentImageBtn {
+    padding: 0;
+    border: 1px solid var(--solid-agent-border);
+    border-radius: 10px;
+    background: none;
+    cursor: zoom-in;
+    overflow: hidden;
+    display: block;
+}
+
+.MessageAttachmentImage {
+    display: block;
+    max-width: 160px;
+    max-height: 120px;
+    object-fit: cover;
+}
+
+.MessageAttachmentFile {
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 220px;
+    padding: 6px 10px;
+    border: 1px solid var(--solid-agent-border);
+    border-radius: 10px;
+    background: var(--solid-agent-bg);
+    color: var(--solid-agent-fg);
+    font-size: 12px;
+}
+
+.MessageAttachmentName {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-weight: 500;
+}
+
+.MessageAttachmentSize {
+    flex-shrink: 0;
+    font-size: 10.5px;
+    color: var(--solid-agent-muted);
+}
+
+.AttachmentLightbox {
+    position: fixed;
+    inset: 0;
+    z-index: 1200;
+    background: rgba(0, 0, 0, 0.75);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    cursor: zoom-out;
+}
+
+.AttachmentLightbox img {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 8px;
+}