@qfei-design/make-ai-assistant 0.2.3 → 0.2.4

package/dist/styles.css

@@ -14,6 +14,7 @@
   --make-ai-internal-radius: var(--make-ai-radius, var(--make-radius-large, 14px));
   --make-ai-internal-shadow: var(--make-ai-shadow, 0 18px 48px rgb(30 31 43 / 12%));
   --make-ai-internal-drawer-width: var(--make-ai-drawer-width, 432px);
+  --make-ai-internal-drawer-resize-line: var(--make-ai-drawer-resize-line, #5147f3);
   --make-ai-internal-z-index: var(--make-ai-z-index, 1050);
   --make-ai-internal-font-size-body: var(--make-ai-font-size-body, .75rem);
   --make-ai-internal-font-size-markdown: var(--make-ai-font-size-markdown, .6875rem);
@@ -21,6 +22,7 @@
   --make-ai-internal-line-height-body: var(--make-ai-line-height-body, 1.58);
   --make-ai-internal-panel-gutter: var(--make-ai-panel-gutter, 16px);
   --make-ai-internal-panel-gutter-compact: var(--make-ai-panel-gutter-compact, 12px);
+  --make-ai-internal-panel-gutter-wide: var(--make-ai-panel-gutter-wide, 24px);
   --make-ai-internal-header-height: var(--make-ai-header-height, 50px);
   --make-ai-internal-message-turn-gap: var(--make-ai-message-turn-gap, 8px);
   --make-ai-internal-assistant-content-gap: var(--make-ai-assistant-content-gap, 12px);
@@ -184,7 +186,7 @@
 }
 
 .make-ai-assistant__drawer-resize-handle::after {
-  background: var(--make-ai-internal-accent);
+  background: var(--make-ai-internal-drawer-resize-line);
   border-radius: 999px;
   content: "";
   height: 100%;
@@ -194,13 +196,13 @@
   top: 0;
   transform: translateX(-50%);
   transition: opacity 160ms ease;
-  width: 3px;
+  width: 2px;
 }
 
 .make-ai-assistant__drawer-resize-handle:hover::after,
 .make-ai-assistant__drawer[data-resizing] .make-ai-assistant__drawer-resize-handle::after,
 .make-ai-assistant__drawer-resize-handle:focus-visible::after {
-  opacity: .7;
+  opacity: 1;
 }
 
 .make-ai-assistant__drawer-resize-handle:focus-visible {
@@ -317,7 +319,7 @@
 }
 
 .make-ai-assistant__header-title {
-  flex: 1 1 auto;
+  flex: 0 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -352,7 +354,7 @@
   align-items: center;
   border-radius: 50%;
   color: color-mix(in srgb, var(--make-ai-internal-text-secondary) 84%, var(--make-ai-internal-accent));
-  cursor: help;
+  cursor: pointer;
   display: inline-flex;
   flex: 0 0 auto;
   height: 18px;
@@ -375,38 +377,33 @@
   outline-offset: 2px;
 }
 
-.make-ai-assistant__header-context-help[data-tooltip]::after {
+.make-ai-assistant__header-context-tooltip {
   background: color-mix(in srgb, var(--make-ai-internal-text) 94%, #000);
   border-radius: 8px;
-  bottom: auto;
   box-shadow: 0 8px 18px rgb(30 31 43 / 18%);
   color: #fcfcff;
-  content: attr(data-tooltip);
   font-size: 11px;
   font-weight: 500;
-  left: auto;
   line-height: 1.5;
-  max-width: min(
-    280px,
-    calc(100% - var(--make-ai-internal-panel-gutter) - var(--make-ai-internal-panel-gutter))
-  );
+  max-height: calc(100vh - 32px);
+  max-width: min(280px, calc(100vw - 32px));
   opacity: 0;
+  overflow: auto;
   padding: 7px 8px;
   pointer-events: none;
-  position: absolute;
-  right: var(--make-ai-internal-panel-gutter);
-  top: calc(100% + 8px);
+  position: fixed;
   transform: translateY(-2px);
   transition: opacity 120ms ease, transform 120ms ease;
+  visibility: hidden;
   white-space: normal;
   width: max-content;
-  z-index: 4;
+  z-index: calc(var(--make-ai-internal-z-index) + 1);
 }
 
-.make-ai-assistant__header-context-help[data-tooltip]:hover::after,
-.make-ai-assistant__header-context-help[data-tooltip]:focus-visible::after {
+.make-ai-assistant__header-context-tooltip[data-positioned][data-visible] {
   opacity: 1;
   transform: translateY(0);
+  visibility: visible;
 }
 
 .make-ai-assistant__body {
@@ -1274,6 +1271,7 @@
   background: var(--make-ai-internal-surface);
   border: 1px solid color-mix(in srgb, var(--make-ai-internal-border) 86%, transparent);
   border-radius: var(--make-ai-internal-radius);
+  container-type: inline-size;
   overflow: hidden;
   padding: 14px;
   width: 100%;
@@ -1512,6 +1510,76 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   }
 }
 
+@container (min-width: 520px) {
+  .make-ai-artifact__comparison {
+    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
+  }
+
+  .make-ai-artifact__record {
+    grid-template-columns: minmax(100px, .8fr) minmax(180px, 1.5fr) auto;
+    padding: 11px 8px;
+  }
+
+  .make-ai-artifact__record-values {
+    gap: 16px;
+  }
+}
+
+@container (min-width: 560px) {
+  .make-ai-assistant__header {
+    padding-inline: var(--make-ai-internal-panel-gutter-wide);
+  }
+
+  .make-ai-assistant__body {
+    padding: 24px var(--make-ai-internal-panel-gutter-wide) 32px;
+  }
+
+  .make-ai-assistant__assistant-text {
+    max-width: min(100%, 76ch);
+  }
+
+  .make-ai-assistant__message--user .make-ai-assistant__message-turn {
+    max-width: min(72%, 420px);
+  }
+
+  .make-ai-assistant__markdown-table th,
+  .make-ai-assistant__markdown-table td {
+    padding: 7px 10px;
+  }
+
+  .make-ai-assistant__composer-region {
+    padding: 12px var(--make-ai-internal-panel-gutter-wide) 10px;
+  }
+
+  .make-ai-assistant__back-to-latest {
+    right: var(--make-ai-internal-panel-gutter-wide);
+  }
+}
+
+@container (min-width: 760px) {
+  .make-ai-assistant__body {
+    padding-bottom: 36px;
+  }
+
+  .make-ai-assistant__assistant-text {
+    max-width: min(100%, 82ch);
+  }
+
+  .make-ai-assistant__message--user .make-ai-assistant__message-turn {
+    max-width: min(68%, 480px);
+  }
+
+  .make-ai-assistant__markdown-table {
+    min-width: 100%;
+    table-layout: fixed;
+  }
+
+  .make-ai-assistant__markdown-table th {
+    overflow-wrap: anywhere;
+    white-space: normal;
+  }
+}
+
 @media (max-width: 560px) {
   .make-ai-assistant__drawer { width: 100vw; }
   .make-ai-assistant__drawer-resize-handle { display: none; }
@@ -1546,6 +1614,7 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   .make-ai-assistant__launcher > svg,
   .make-ai-assistant__back-to-latest,
   .make-ai-assistant__drawer-resize-handle::after,
+  .make-ai-assistant__header-context-tooltip,
   .make-ai-assistant__reply-action[data-tooltip]::after,
   .make-ai-assistant__send[data-tooltip]::after,
   .make-ai-assistant__process summary::after {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qfei-design/make-ai-assistant",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Platform-wide Make AI Assistant contracts, React shell, and context-aware artifact templates.",
   "type": "module",
   "sideEffects": [