@qfei-design/make-ai-assistant 0.2.14 → 0.2.16

package/dist/styles.css

@@ -293,7 +293,6 @@
 }
 
 .make-ai-assistant__avatar svg,
-.make-ai-assistant__icon-button svg,
 .make-ai-assistant__send svg {
   fill: none;
   height: 20px;
@@ -323,17 +322,11 @@
 }
 
 .make-ai-assistant__icon-button-icon {
-  display: inline-flex;
+  display: block;
   height: 20px;
-  line-height: 0;
   width: 20px;
 }
 
-.make-ai-assistant__icon-button-icon svg {
-  height: 100%;
-  width: 100%;
-}
-
 .make-ai-assistant__header-actions {
   align-items: center;
   display: flex;
@@ -390,27 +383,19 @@
 }
 
 .make-ai-assistant__task-list-icon {
-  display: inline-flex;
+  display: block;
   flex: 0 0 auto;
   height: 19px;
-  line-height: 0;
   width: 19px;
 }
 
 .make-ai-assistant__task-list-disclosure {
-  display: inline-flex;
+  display: block;
   flex: 0 0 auto;
   height: 15px;
-  line-height: 0;
   width: 15px;
 }
 
-.make-ai-assistant__task-list-icon svg,
-.make-ai-assistant__task-list-disclosure svg {
-  height: 100%;
-  width: 100%;
-}
-
 .make-ai-assistant__header-title {
   flex: 0 1 auto;
   min-width: 0;
@@ -1141,9 +1126,7 @@
   width: 28px;
 }
 
-.make-ai-assistant__reply-copy > svg,
-.make-ai-assistant__reply-regenerate > svg,
-.make-ai-assistant__reply-feedback-action > svg {
+.make-ai-assistant__reply-regenerate > svg {
   fill: none;
   height: 15px;
   stroke: currentColor;
@@ -1155,18 +1138,11 @@
 
 .make-ai-assistant__reply-copy-icon,
 .make-ai-assistant__reply-feedback-icon {
-  display: inline-flex;
+  display: block;
   height: 15px;
-  line-height: 0;
   width: 15px;
 }
 
-.make-ai-assistant__reply-copy-icon svg,
-.make-ai-assistant__reply-feedback-icon svg {
-  height: 100%;
-  width: 100%;
-}
-
 .make-ai-assistant__reply-feedback-action {
   height: 28px;
   width: 28px;
@@ -1347,11 +1323,11 @@
   border-radius: 16px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
   max-height: min(440px, 46vh);
-  min-height: 132px;
+  min-height: 0;
   overflow: auto;
-  padding: 12px 14px 10px;
+  padding: 10px 12px 8px;
   transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
 }
 
@@ -1369,8 +1345,8 @@
   color: var(--make-ai-internal-text);
   font-size: var(--make-ai-internal-font-size-body);
   line-height: var(--make-ai-internal-line-height-body);
-  max-height: 192px;
-  min-height: 72px;
+  max-height: 160px;
+  min-height: 48px;
   outline: 0;
   overflow-y: auto;
   padding: 3px 4px;
@@ -1406,6 +1382,7 @@
   align-items: center;
   display: flex;
   gap: 7px;
+  margin-left: auto;
 }
 
 .make-ai-assistant__composer-toolbar {
@@ -1934,9 +1911,7 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   text-align: left;
 }
 
-.make-ai-assistant__conversation-row-select > svg,
-.make-ai-assistant__conversation-row-action > svg,
-.make-ai-assistant__conversation-new > svg {
+.make-ai-assistant__conversation-row-select > svg {
   fill: none;
   flex: 0 0 auto;
   height: 16px;
@@ -1948,31 +1923,18 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 }
 
 .make-ai-assistant__conversation-row-action-icon {
-  display: inline-flex;
+  display: block;
   height: 16px;
-  line-height: 0;
   width: 16px;
 }
 
-.make-ai-assistant__conversation-row-action-icon svg {
-  height: 100%;
-  width: 100%;
-}
-
 .make-ai-assistant__conversation-new-icon,
 .make-ai-assistant__conversation-refresh-icon {
-  display: inline-flex;
+  display: block;
   height: 16px;
-  line-height: 0;
   width: 16px;
 }
 
-.make-ai-assistant__conversation-new-icon svg,
-.make-ai-assistant__conversation-refresh-icon svg {
-  height: 100%;
-  width: 100%;
-}
-
 .make-ai-assistant__conversation-row-select span {
   min-width: 0;
   overflow: hidden;
@@ -2085,18 +2047,12 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 }
 
 .make-ai-assistant__conversation-delete-confirmation-icon {
-  display: inline-flex;
+  display: block;
   flex: 0 0 auto;
   height: 16px;
-  line-height: 0;
   width: 16px;
 }
 
-.make-ai-assistant__conversation-delete-confirmation-icon svg {
-  height: 100%;
-  width: 100%;
-}
-
 .make-ai-assistant__conversation-delete-confirmation-message {
   color: var(--make-ai-internal-danger);
   flex: 1 1 0;
@@ -2241,7 +2197,6 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   color: var(--make-ai-internal-text);
 }
 
-.make-ai-assistant__attachment-trigger > svg,
 .make-ai-assistant__attachment-menu svg {
   fill: none;
   height: 18px;
@@ -2253,17 +2208,11 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 }
 
 .make-ai-assistant__attachment-trigger-icon {
-  display: inline-flex;
+  display: block;
   height: 18px;
-  line-height: 0;
   width: 18px;
 }
 
-.make-ai-assistant__attachment-trigger-icon svg {
-  height: 100%;
-  width: 100%;
-}
-
 .make-ai-assistant__attachment-menu {
   background: var(--make-ai-internal-surface);
   border: 1px solid var(--make-ai-internal-border);
@@ -2297,33 +2246,37 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 }
 
 .make-ai-assistant__attachment-drafts {
-  border-bottom: 1px solid var(--make-ai-internal-border);
+  border: 0;
   font-size: var(--make-ai-internal-font-size-meta);
-  max-height: 184px;
-  overflow: auto;
-  padding: 0 0 12px;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 0;
 }
 
 .make-ai-assistant__attachment-drafts ul {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 6px;
   list-style: none;
   margin: 0;
   padding: 0;
+  width: max-content;
 }
 
 .make-ai-assistant__attachment-drafts li {
-  align-items: center;
   background: var(--make-ai-internal-surface);
   border: 1px solid var(--make-ai-internal-border);
-  border-radius: 10px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  min-height: 56px;
-  padding: 4px 26px 4px 4px;
+  border-radius: 9px;
+  flex: 0 0 64px;
+  height: 64px;
+  overflow: hidden;
   position: relative;
+  width: 64px;
+}
+
+.make-ai-assistant__attachment-drafts li[data-status="failed"] {
+  border-color: var(--make-ai-internal-danger);
 }
 
 .make-ai-assistant__attachment-drafts button {
@@ -2337,32 +2290,35 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 .make-ai-assistant__attachment-draft-preview,
 .make-ai-assistant__attachment-draft-file {
   background: var(--make-ai-internal-surface-strong);
-  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 14%, var(--make-ai-internal-border));
-  border-radius: 7px;
-  flex: 0 0 auto;
-  height: 44px;
+  border: 0;
+  border-radius: 8px;
+  height: 100%;
   object-fit: cover;
-  width: 44px;
+  width: 100%;
 }
 
 .make-ai-assistant__attachment-draft-preview-button {
-  border-radius: 7px;
+  border-radius: 8px;
   cursor: zoom-in;
-  flex: 0 0 auto;
+  display: block;
+  height: 100%;
   line-height: 0;
   overflow: hidden;
   padding: 0 !important;
+  width: 100%;
 }
 
 .make-ai-assistant__attachment-draft-preview-button:hover .make-ai-assistant__attachment-draft-preview {
-  border-color: color-mix(in srgb, var(--make-ai-internal-accent) 44%, var(--make-ai-internal-border));
+  filter: brightness(.96);
 }
 
-.make-ai-assistant__attachment-draft-file {
+.make-ai-assistant__attachment-drafts .make-ai-assistant__attachment-draft-file {
   align-items: center;
+  background: var(--make-ai-internal-surface-strong);
   color: var(--make-ai-internal-text-secondary);
   display: inline-flex;
   justify-content: center;
+  padding: 0;
 }
 
 .make-ai-assistant__attachment-draft-file svg {
@@ -2375,26 +2331,50 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   width: 20px;
 }
 
-.make-ai-assistant__attachment-draft-details {
-  display: grid;
-  gap: 3px;
-  min-width: 0;
+.make-ai-assistant__attachment-draft-status {
+  background: color-mix(in srgb, var(--make-ai-internal-overlay) 76%, transparent);
+  border-radius: 4px;
+  bottom: 4px;
+  color: var(--make-ai-internal-on-overlay);
+  font-size: 10px;
+  left: 4px;
+  line-height: 16px;
+  padding: 0 3px;
+  pointer-events: none;
+  position: absolute;
 }
 
-.make-ai-assistant__attachment-draft-name {
-  color: var(--make-ai-internal-text);
-  max-width: 152px;
+.make-ai-assistant__attachment-drafts li[data-status="failed"] .make-ai-assistant__attachment-draft-status {
+  background: var(--make-ai-internal-danger);
+}
+
+.make-ai-assistant__attachment-draft-error {
+  clip-path: inset(50%);
+  height: 1px;
   overflow: hidden;
-  text-overflow: ellipsis;
+  position: absolute;
   white-space: nowrap;
+  width: 1px;
 }
 
-.make-ai-assistant__attachment-draft-status {
-  color: var(--make-ai-internal-text-secondary);
+.make-ai-assistant__attachment-drafts .make-ai-assistant__attachment-draft-control {
+  align-items: center;
+  background: color-mix(in srgb, var(--make-ai-internal-overlay) 82%, transparent);
+  border-radius: 50%;
+  bottom: 4px;
+  color: var(--make-ai-internal-on-overlay);
+  display: inline-flex;
+  height: 20px;
+  justify-content: center;
+  padding: 0;
+  position: absolute;
+  right: 4px;
+  width: 20px;
 }
 
-.make-ai-assistant__attachment-drafts li[data-status="failed"] .make-ai-assistant__attachment-draft-status {
-  color: var(--make-ai-internal-danger);
+.make-ai-assistant__attachment-draft-control svg {
+  height: 13px;
+  width: 13px;
 }
 
 .make-ai-assistant__attachment-draft-remove {
@@ -2421,29 +2401,13 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   padding: 0;
 }
 
-.make-ai-assistant__attachment-draft-remove > svg {
-  fill: none;
-  height: 13px;
-  stroke: currentColor;
-  stroke-linecap: round;
-  stroke-width: 2;
-  width: 13px;
-}
-
 .make-ai-assistant__attachment-draft-remove-icon,
 .make-ai-assistant__attachment-preview-close-icon {
-  display: inline-flex;
+  display: block;
   height: 13px;
-  line-height: 0;
   width: 13px;
 }
 
-.make-ai-assistant__attachment-draft-remove-icon svg,
-.make-ai-assistant__attachment-preview-close-icon svg {
-  height: 100%;
-  width: 100%;
-}
-
 .make-ai-assistant__attachment-drafts li:hover .make-ai-assistant__attachment-draft-remove,
 .make-ai-assistant__attachment-drafts li:focus-within .make-ai-assistant__attachment-draft-remove {
   opacity: 1;
@@ -2469,17 +2433,60 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   box-shadow: 0 20px 48px color-mix(in srgb, var(--make-ai-internal-text) 28%, transparent);
   max-height: min(76vh, 760px);
   max-width: min(88vw, 960px);
+  overflow: auto;
   padding: 8px;
   position: relative;
 }
 
+.make-ai-assistant__attachment-preview-dialog[data-kind="file"] {
+  width: min(320px, calc(100vw - 48px));
+}
+
 .make-ai-assistant__attachment-preview-dialog img {
   display: block;
-  height: 100%;
-  max-height: min(76vh, 744px);
+  height: auto;
+  margin-inline: auto;
+  max-height: min(62vh, 640px);
   max-width: min(88vw, 944px);
   object-fit: contain;
-  width: 100%;
+  width: auto;
+}
+
+.make-ai-assistant__attachment-preview-file {
+  align-items: center;
+  background: var(--make-ai-internal-surface-strong);
+  border-radius: 10px;
+  color: var(--make-ai-internal-text-secondary);
+  display: flex;
+  height: 104px;
+  justify-content: center;
+}
+
+.make-ai-assistant__attachment-preview-file svg {
+  height: 32px;
+  width: 32px;
+}
+
+.make-ai-assistant__attachment-preview-details {
+  color: var(--make-ai-internal-text);
+  display: grid;
+  font-size: var(--make-ai-internal-font-size-meta);
+  gap: 4px;
+  padding: 10px 6px 4px;
+}
+
+.make-ai-assistant__attachment-preview-details strong {
+  overflow-wrap: anywhere;
+}
+
+.make-ai-assistant__attachment-preview-details span {
+  color: var(--make-ai-internal-text-secondary);
+}
+
+.make-ai-assistant__attachment-preview-details p {
+  color: var(--make-ai-internal-danger);
+  line-height: var(--make-ai-internal-line-height-meta);
+  margin: 4px 0 0;
 }
 
 .make-ai-assistant__attachment-preview-close {
@@ -2499,12 +2506,17 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   width: 28px;
 }
 
-.make-ai-assistant__attachment-draft-preview-button:focus-visible,
 .make-ai-assistant__attachment-preview-close:focus-visible {
   outline: 2px solid var(--make-ai-internal-accent);
   outline-offset: 2px;
 }
 
+.make-ai-assistant__attachment-drafts .make-ai-assistant__attachment-draft-preview-button:focus-visible,
+.make-ai-assistant__attachment-drafts .make-ai-assistant__attachment-draft-file:focus-visible {
+  outline: 2px solid var(--make-ai-internal-accent);
+  outline-offset: -3px;
+}
+
 .make-ai-assistant__conversation-controls button:focus-visible,
 .make-ai-assistant__feedback button:focus-visible,
 .make-ai-assistant__attachment button:focus-visible,

package/package.ai.json

@@ -1,6 +1,6 @@
 {
   "packageName": "@qfei-design/make-ai-assistant",
-  "minimumRuntimeVersion": "0.2.0",
+  "minimumRuntimeVersion": "0.2.16",
   "readOrder": [
     "package.ai.json",
     "README.md",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qfei-design/make-ai-assistant",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "Platform-wide Make AI Assistant contracts, React shell, and context-aware artifact templates.",
   "type": "module",
   "sideEffects": [
@@ -125,6 +125,7 @@
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.0.0",
     "jsdom": "^29.1.1",
+    "lucide-react": "1.46.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "typescript": "^5.6.0",
@@ -134,8 +135,5 @@
   "engines": {
     "node": ">=22.12.0"
   },
-  "packageManager": "pnpm@10.20.0+sha512.cf9998222162dd85864d0a8102e7892e7ba4ceadebbf5a31f9c2fce48dfce317a9c53b9f6464d1ef9042cba2e02ae02a9f7c143a2b438cd93c91840f0192b9dd",
-  "dependencies": {
-    "@qfei-design/icons-react": "1.1.39"
-  }
+  "packageManager": "pnpm@10.20.0+sha512.cf9998222162dd85864d0a8102e7892e7ba4ceadebbf5a31f9c2fce48dfce317a9c53b9f6464d1ef9042cba2e02ae02a9f7c143a2b438cd93c91840f0192b9dd"
 }