@qfei-design/make-ai-assistant 0.2.11 → 0.2.13

package/dist/styles.css

@@ -391,13 +391,13 @@
 
 .make-ai-assistant__task-list-trigger {
   align-items: center;
-  background: transparent;
-  border: 1px solid transparent;
+  background: var(--make-ai-internal-surface-strong);
+  border: 0;
   border-radius: 9px;
   color: var(--make-ai-internal-text-secondary);
   cursor: pointer;
   display: inline-flex;
-  font-size: var(--make-ai-internal-font-size-meta);
+  font-size: var(--make-ai-internal-font-size-caption);
   gap: 6px;
   height: 34px;
   max-width: 118px;
@@ -407,43 +407,25 @@
 
 .make-ai-assistant__task-list-trigger:hover,
 .make-ai-assistant__task-list-trigger[aria-expanded="true"] {
-  background: var(--make-ai-internal-surface);
-  border-color: color-mix(in srgb, var(--make-ai-internal-accent) 30%, var(--make-ai-internal-border));
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 8%, var(--make-ai-internal-surface-strong));
   color: var(--make-ai-internal-text);
 }
 
 .make-ai-assistant__task-list-trigger svg:first-child {
-  height: 17px;
-  width: 17px;
+  height: 19px;
+  width: 19px;
 }
 
 .make-ai-assistant__task-list-trigger svg:last-child {
-  height: 12px;
+  height: 15px;
   transition: transform 160ms ease;
-  width: 12px;
+  width: 15px;
 }
 
 .make-ai-assistant__task-list-trigger[aria-expanded="true"] svg:last-child {
   transform: rotate(180deg);
 }
 
-.make-ai-assistant__header-content,
-.make-ai-assistant__header-title-row,
-.make-ai-assistant__header-context {
-  min-width: 0;
-}
-
-.make-ai-assistant__header-title-row,
-.make-ai-assistant__header-context {
-  align-items: center;
-  display: flex;
-}
-
-.make-ai-assistant__header-title-row {
-  gap: 8px;
-  justify-content: center;
-}
-
 .make-ai-assistant__header-title {
   flex: 0 1 auto;
   min-width: 0;
@@ -452,98 +434,6 @@
   white-space: nowrap;
 }
 
-.make-ai-assistant__current-conversation {
-  color: var(--make-ai-internal-text-secondary);
-  flex: 0 1 auto;
-  font-size: var(--make-ai-internal-font-size-caption);
-  line-height: var(--make-ai-internal-line-height-caption);
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.make-ai-assistant__read-only-tag {
-  background: color-mix(in srgb, var(--make-ai-internal-accent) 10%, var(--make-ai-internal-bg));
-  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 24%, var(--make-ai-internal-border));
-  border-radius: 5px;
-  color: color-mix(in srgb, var(--make-ai-internal-accent) 82%, var(--make-ai-internal-text));
-  flex: 0 0 auto;
-  font-size: var(--make-ai-internal-font-size-caption);
-  font-weight: 650;
-  line-height: var(--make-ai-internal-line-height-caption);
-  padding: 0 5px;
-}
-
-.make-ai-assistant__header-context {
-  gap: 6px;
-  justify-content: center;
-  margin-top: 1px;
-}
-
-.make-ai-assistant__header-context p {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.make-ai-assistant__header-context-help {
-  align-items: center;
-  border-radius: 50%;
-  color: color-mix(in srgb, var(--make-ai-internal-text-secondary) 84%, var(--make-ai-internal-accent));
-  cursor: pointer;
-  display: inline-flex;
-  flex: 0 0 auto;
-  height: 18px;
-  justify-content: center;
-  width: 18px;
-}
-
-.make-ai-assistant__header-context-help svg {
-  fill: none;
-  height: 14px;
-  stroke: currentColor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 1.8;
-  width: 14px;
-}
-
-.make-ai-assistant__header-context-help:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--make-ai-internal-accent) 32%, transparent);
-  outline-offset: 2px;
-}
-
-.make-ai-assistant__header-context-tooltip {
-  background: var(--make-ai-internal-overlay);
-  border-radius: 8px;
-  box-shadow: 0 8px 18px var(--make-ai-internal-overlay-shadow);
-  color: var(--make-ai-internal-on-overlay);
-  font-size: var(--make-ai-internal-font-size-meta);
-  font-weight: 500;
-  line-height: var(--make-ai-internal-line-height-meta);
-  max-height: calc(100vh - 32px);
-  max-width: min(280px, calc(100vw - 32px));
-  opacity: 0;
-  overflow: auto;
-  padding: 7px 8px;
-  pointer-events: none;
-  position: fixed;
-  transform: translateY(-2px);
-  transition: opacity 120ms ease, transform 120ms ease;
-  visibility: hidden;
-  white-space: normal;
-  width: max-content;
-  z-index: calc(var(--make-ai-internal-z-index) + 1);
-}
-
-.make-ai-assistant__header-context-tooltip[data-positioned][data-visible] {
-  opacity: 1;
-  transform: translateY(0);
-  visibility: visible;
-}
-
 .make-ai-assistant__body {
   background: var(--make-ai-internal-bg);
   grid-row: 2;
@@ -1046,24 +936,44 @@
 }
 
 .make-ai-assistant__process {
-  background: var(--make-ai-internal-surface);
-  border: 1px solid color-mix(in srgb, var(--make-ai-internal-border) 88%, transparent);
-  border-radius: 10px;
+  background: color-mix(in srgb, var(--make-ai-internal-surface) 94%, var(--make-ai-internal-accent-soft));
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 14%, var(--make-ai-internal-border));
+  border-radius: 14px;
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--make-ai-internal-text) 5%, transparent);
+  box-sizing: border-box;
   color: var(--make-ai-internal-text-secondary);
   font-size: var(--make-ai-internal-font-size-meta);
   line-height: var(--make-ai-internal-line-height-meta);
+  margin: 4px auto;
   overflow: hidden;
   overflow-wrap: anywhere;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+  width: min(calc(100% - 16px), 720px);
+}
+
+.make-ai-assistant__process:hover,
+.make-ai-assistant__process:focus-within {
+  border-color: color-mix(in srgb, var(--make-ai-internal-accent) 30%, var(--make-ai-internal-border));
+  box-shadow: 0 6px 18px color-mix(in srgb, var(--make-ai-internal-accent) 10%, transparent);
 }
 
 .make-ai-assistant__process summary {
   align-items: center;
   cursor: pointer;
   display: flex;
-  gap: 8px;
+  gap: 10px;
   list-style: none;
-  min-height: 32px;
-  padding: 7px 9px;
+  min-height: 48px;
+  padding: 10px 12px;
+}
+
+.make-ai-assistant__process summary:hover {
+  background: color-mix(in srgb, var(--make-ai-internal-accent-soft) 62%, transparent);
+}
+
+.make-ai-assistant__process summary:focus-visible {
+  outline: 2px solid var(--make-ai-internal-accent);
+  outline-offset: -2px;
 }
 
 .make-ai-assistant__process summary::-webkit-details-marker {
@@ -1086,49 +996,134 @@
   transform: rotate(225deg);
 }
 
+.make-ai-assistant__process[open] summary {
+  border-bottom: 1px solid color-mix(in srgb, var(--make-ai-internal-border) 76%, transparent);
+}
+
+.make-ai-assistant__process-summary {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  gap: 10px;
+  min-width: 0;
+}
+
+.make-ai-assistant__process-indicator {
+  align-items: center;
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 12%, var(--make-ai-internal-surface));
+  border-radius: 8px;
+  display: inline-flex;
+  flex: 0 0 auto;
+  height: 26px;
+  justify-content: center;
+  width: 26px;
+}
+
+.make-ai-assistant__process-indicator::before {
+  background: var(--make-ai-internal-accent);
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--make-ai-internal-accent) 14%, transparent);
+  content: "";
+  height: 6px;
+  width: 6px;
+}
+
+.make-ai-assistant__process-copy {
+  display: grid;
+  gap: 1px;
+  min-width: 0;
+}
+
+.make-ai-assistant__process-title {
+  color: var(--make-ai-internal-text);
+  font-size: var(--make-ai-internal-font-size-ui);
+  font-weight: 700;
+  line-height: var(--make-ai-internal-line-height-ui);
+}
+
+.make-ai-assistant__process .make-ai-assistant__process-latest {
+  color: var(--make-ai-internal-text-secondary);
+  display: block;
+  flex: 0 1 auto;
+  font-size: var(--make-ai-internal-font-size-meta);
+  line-height: var(--make-ai-internal-line-height-meta);
+  min-height: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .make-ai-assistant__process-count {
-  color: color-mix(in srgb, var(--make-ai-internal-text-secondary) 78%, var(--make-ai-internal-bg));
+  background: var(--make-ai-internal-surface-strong);
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-border) 82%, transparent);
+  border-radius: 999px;
+  color: var(--make-ai-internal-text-secondary);
   flex: 0 0 auto;
   font-size: var(--make-ai-internal-font-size-caption);
-  margin-left: auto;
+  font-variant-numeric: tabular-nums;
+  font-weight: 650;
+  padding: 3px 7px;
+  white-space: nowrap;
 }
 
 .make-ai-assistant__process ol {
+  background: color-mix(in srgb, var(--make-ai-internal-surface) 82%, transparent);
   display: grid;
-  gap: 6px;
+  gap: 8px;
   list-style: none;
   margin: 0;
-  padding: 0 10px 10px 12px;
+  padding: 11px 14px 13px;
 }
 
 .make-ai-assistant__process li {
   align-items: flex-start;
   display: flex;
-  gap: 8px;
+  gap: 10px;
   min-width: 0;
+  position: relative;
 }
 
 .make-ai-assistant__process li > span:first-child {
-  background: var(--make-ai-internal-border);
+  background: var(--make-ai-internal-surface);
+  border: 2px solid color-mix(in srgb, var(--make-ai-internal-border) 88%, transparent);
   border-radius: 50%;
+  box-sizing: border-box;
   flex: 0 0 auto;
-  height: 6px;
-  margin-top: 7px;
-  width: 6px;
+  height: 10px;
+  margin-top: 4px;
+  position: relative;
+  width: 10px;
+}
+
+.make-ai-assistant__process li:not(:last-child)::after {
+  background: color-mix(in srgb, var(--make-ai-internal-border) 78%, transparent);
+  bottom: -12px;
+  content: "";
+  left: 4px;
+  position: absolute;
+  top: 14px;
+  width: 2px;
 }
 
 .make-ai-assistant__process li[data-step-active] > span:first-child {
   background: var(--make-ai-internal-accent);
+  border-color: var(--make-ai-internal-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--make-ai-internal-accent) 14%, transparent);
 }
 
 .make-ai-assistant__process li > span:last-child {
-  color: var(--make-ai-internal-text);
-  font-size: var(--make-ai-internal-font-size-body);
-  line-height: var(--make-ai-internal-line-height-body);
+  color: var(--make-ai-internal-text-secondary);
+  font-size: var(--make-ai-internal-font-size-meta);
+  line-height: var(--make-ai-internal-line-height-meta);
   min-width: 0;
   overflow-wrap: anywhere;
 }
 
+.make-ai-assistant__process li[data-step-active] > span:last-child {
+  color: var(--make-ai-internal-text);
+  font-weight: 600;
+}
+
 .make-ai-assistant__reply-actions {
   align-items: center;
   color: var(--make-ai-internal-text-secondary);
@@ -1150,7 +1145,8 @@
 }
 
 .make-ai-assistant__reply-copy,
-.make-ai-assistant__reply-regenerate {
+.make-ai-assistant__reply-regenerate,
+.make-ai-assistant__reply-feedback-action {
   align-items: center;
   border: 1px solid transparent;
   display: inline-flex;
@@ -1161,7 +1157,8 @@
 }
 
 .make-ai-assistant__reply-copy svg,
-.make-ai-assistant__reply-regenerate svg {
+.make-ai-assistant__reply-regenerate svg,
+.make-ai-assistant__reply-feedback-action svg {
   fill: none;
   height: 15px;
   stroke: currentColor;
@@ -1171,6 +1168,11 @@
   width: 15px;
 }
 
+.make-ai-assistant__reply-feedback-action {
+  height: 28px;
+  width: 28px;
+}
+
 .make-ai-assistant__reply-action[data-tooltip]::after,
 .make-ai-assistant__send[data-tooltip]::after {
   background: var(--make-ai-internal-overlay);
@@ -1202,7 +1204,9 @@
 }
 
 .make-ai-assistant__reply-copy:hover,
-.make-ai-assistant__reply-regenerate:hover {
+.make-ai-assistant__reply-regenerate:hover,
+.make-ai-assistant__reply-feedback-action:hover,
+.make-ai-assistant__reply-feedback-action[aria-pressed="true"] {
   background: var(--make-ai-internal-surface);
   border-color: color-mix(in srgb, var(--make-ai-internal-accent) 18%, var(--make-ai-internal-border));
   color: var(--make-ai-internal-accent);
@@ -1656,10 +1660,7 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   }
 
   .make-ai-assistant__task-list-trigger > span,
-  .make-ai-assistant__task-list-trigger svg:last-child,
-  .make-ai-assistant__current-conversation,
-  .make-ai-assistant__read-only-tag,
-  .make-ai-assistant__header-context {
+  .make-ai-assistant__task-list-trigger svg:last-child {
     display: none;
   }
 
@@ -1861,7 +1862,7 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   overflow: auto;
   padding: 12px 8px 8px;
   position: absolute;
-  top: calc(var(--make-ai-internal-header-height) + 8px);
+  top: calc(var(--make-ai-internal-header-height) + 3px);
   width: min(300px, calc(100% - var(--make-ai-internal-panel-gutter) * 2));
   z-index: calc(var(--make-ai-internal-z-index) + 1);
 }
@@ -1897,13 +1898,21 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 
 .make-ai-assistant__conversation-row {
   align-items: center;
+  border-radius: 8px;
   display: flex;
   gap: 2px;
   min-width: 0;
+  padding: 2px;
 }
 
-.make-ai-assistant__conversation-row > button:first-child {
+.make-ai-assistant__conversation-row:hover,
+.make-ai-assistant__conversation-row:focus-within {
+  background: var(--make-ai-internal-surface-strong);
+}
+
+.make-ai-assistant__conversation-row .make-ai-assistant__conversation-row-select {
   align-items: center;
+  background: transparent;
   border-color: transparent;
   display: flex;
   flex: 1;
@@ -1915,7 +1924,8 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   text-align: left;
 }
 
-.make-ai-assistant__conversation-row > button:first-child svg,
+.make-ai-assistant__conversation-row-select svg,
+.make-ai-assistant__conversation-row-action svg,
 .make-ai-assistant__conversation-new svg {
   fill: none;
   flex: 0 0 auto;
@@ -1927,28 +1937,106 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   width: 16px;
 }
 
-.make-ai-assistant__conversation-row > button:first-child span {
+.make-ai-assistant__conversation-row-select span {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.make-ai-assistant__conversation-row > button[aria-pressed="true"] {
+.make-ai-assistant__conversation-row .make-ai-assistant__conversation-row-select[aria-pressed="true"] {
   background: var(--make-ai-internal-accent-soft);
   color: var(--make-ai-internal-accent);
 }
 
-.make-ai-assistant__conversation-row > button:last-child {
+.make-ai-assistant__conversation-row-actions {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  gap: 2px;
+}
+
+.make-ai-assistant__conversation-row .make-ai-assistant__conversation-row-pin,
+.make-ai-assistant__conversation-row .make-ai-assistant__conversation-row-action {
   background: transparent;
   border-color: transparent;
   color: var(--make-ai-internal-text-secondary);
   flex: 0 0 auto;
   height: 30px;
   padding: 0;
+  position: relative;
   width: 30px;
 }
 
+.make-ai-assistant__conversation-row .make-ai-assistant__conversation-row-action {
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(.9);
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+
+.make-ai-assistant__conversation-row:hover .make-ai-assistant__conversation-row-action,
+.make-ai-assistant__conversation-row:focus-within .make-ai-assistant__conversation-row-action,
+.make-ai-assistant__conversation-row[data-editing] .make-ai-assistant__conversation-row-action {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+
+.make-ai-assistant__conversation-row-action--danger:hover {
+  color: var(--make-ai-internal-danger);
+}
+
+.make-ai-assistant__conversation-tooltip {
+  background: var(--make-ai-internal-overlay);
+  border-radius: 8px;
+  box-shadow: 0 8px 18px var(--make-ai-internal-overlay-shadow);
+  color: var(--make-ai-internal-on-overlay);
+  font-size: var(--make-ai-internal-font-size-meta);
+  font-weight: 600;
+  line-height: var(--make-ai-internal-line-height-meta);
+  max-width: calc(100vw - 16px);
+  padding: 6px 8px;
+  pointer-events: none;
+  position: fixed;
+  transform: translate(-50%, -100%);
+  z-index: calc(var(--make-ai-internal-z-index) + 3);
+}
+
+.make-ai-assistant__conversation-tooltip[data-placement="below"] {
+  transform: translate(-50%, 0);
+}
+
+.make-ai-assistant__conversation-row-title-input {
+  background: var(--make-ai-internal-surface);
+  border: 1px solid var(--make-ai-internal-border);
+  border-radius: 6px;
+  color: inherit;
+  flex: 1;
+  font: inherit;
+  min-width: 0;
+  padding: 6px;
+}
+
+.make-ai-assistant__conversation-delete-confirmation {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0;
+  gap: 2px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.make-ai-assistant__conversation-delete-confirmation > span {
+  color: var(--make-ai-internal-text-secondary);
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  padding-left: 4px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .make-ai-assistant__conversation-more,
 .make-ai-assistant__conversation-refresh {
   background: transparent !important;
@@ -1961,28 +2049,15 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   width: 100%;
 }
 
-.make-ai-assistant__conversation-management {
+.make-ai-assistant__conversation-history-actions {
   border-top: 1px solid var(--make-ai-internal-border);
   margin-top: 8px;
   padding: 8px 7px 0;
 }
 
-.make-ai-assistant__conversation-management summary {
+.make-ai-assistant__conversation-history-actions p {
   color: var(--make-ai-internal-text-secondary);
-  cursor: pointer;
-}
-
-.make-ai-assistant__conversation-actions {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding-top: 8px;
-}
-
-.make-ai-assistant__conversation-actions input {
-  flex: 1;
-  min-width: 100px;
+  margin: 6px 0 0;
 }
 
 .make-ai-assistant__conversation-error {
@@ -2014,7 +2089,6 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 }
 
 .make-ai-assistant__conversation-controls button,
-.make-ai-assistant__feedback button,
 .make-ai-assistant__attachment button {
   background: var(--make-ai-internal-surface);
   border: 1px solid var(--make-ai-internal-border);
@@ -2024,12 +2098,21 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   font: inherit;
   padding: 4px 8px;
 }
-.make-ai-assistant__feedback { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--make-ai-internal-font-size-meta); }
-.make-ai-assistant__feedback button[aria-pressed="true"] { color: var(--make-ai-internal-accent); border-color: var(--make-ai-internal-accent); }
-.make-ai-assistant__feedback form { display: grid; flex-basis: 100%; gap: 6px; }
+.make-ai-assistant__feedback { align-items: center; display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--make-ai-internal-font-size-meta); }
+.make-ai-assistant__reply-feedback-action { color: inherit; }
+.make-ai-assistant__reply-feedback-action[aria-pressed="true"] { color: var(--make-ai-internal-accent); }
+.make-ai-assistant__feedback-text-action {
+  background: var(--make-ai-internal-surface);
+  border: 1px solid var(--make-ai-internal-border);
+  border-radius: 6px;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 4px 8px;
+}
+.make-ai-assistant__feedback form { display: grid; flex-basis: 100%; gap: 6px; min-width: min(100%, 240px); }
 .make-ai-assistant__feedback input,
-.make-ai-assistant__feedback textarea,
-.make-ai-assistant__conversation-actions input { border: 1px solid var(--make-ai-internal-border); border-radius: 6px; color: inherit; font: inherit; padding: 6px; width: 100%; }
+.make-ai-assistant__feedback textarea { border: 1px solid var(--make-ai-internal-border); border-radius: 6px; color: inherit; font: inherit; padding: 6px; width: 100%; }
 .make-ai-assistant__attachment { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--make-ai-internal-border); border-radius: 8px; font-size: var(--make-ai-internal-font-size-meta); }
 .make-ai-assistant__attachment img,
 .make-ai-assistant__attachment video { max-height: 260px; max-width: 100%; object-fit: contain; }
@@ -2110,9 +2193,9 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 
 .make-ai-assistant__attachment-drafts {
   font-size: var(--make-ai-internal-font-size-meta);
-  max-height: 140px;
+  max-height: 156px;
   overflow: auto;
-  padding-bottom: 8px;
+  padding: 4px 0 8px;
 }
 
 .make-ai-assistant__attachment-drafts ul {
@@ -2128,11 +2211,13 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   align-items: center;
   background: var(--make-ai-internal-surface);
   border: 1px solid var(--make-ai-internal-border);
-  border-radius: 8px;
+  border-radius: 10px;
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
-  padding: 5px 7px;
+  gap: 8px;
+  min-height: 64px;
+  padding: 5px 28px 5px 5px;
+  position: relative;
 }
 
 .make-ai-assistant__attachment-drafts button {
@@ -2143,12 +2228,116 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   padding: 2px 4px;
 }
 
+.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: 52px;
+  object-fit: cover;
+  width: 52px;
+}
+
+.make-ai-assistant__attachment-draft-file {
+  align-items: center;
+  color: var(--make-ai-internal-text-secondary);
+  display: inline-flex;
+  justify-content: center;
+}
+
+.make-ai-assistant__attachment-draft-file svg {
+  fill: none;
+  height: 24px;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.6;
+  width: 24px;
+}
+
+.make-ai-assistant__attachment-draft-details {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.make-ai-assistant__attachment-draft-name {
+  color: var(--make-ai-internal-text);
+  max-width: 152px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.make-ai-assistant__attachment-draft-status {
+  color: var(--make-ai-internal-text-secondary);
+}
+
+.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-remove {
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  display: inline-flex;
+  height: 20px;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  transform: scale(.86);
+  transition: opacity 120ms ease, transform 120ms ease;
+  width: 20px;
+}
+
+.make-ai-assistant__attachment-drafts .make-ai-assistant__attachment-draft-remove {
+  background: color-mix(in srgb, var(--make-ai-internal-overlay) 82%, transparent);
+  border: 0;
+  color: var(--make-ai-internal-on-overlay);
+  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-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;
+  pointer-events: auto;
+  transform: scale(1);
+}
+
 .make-ai-assistant__conversation-controls button:focus-visible,
 .make-ai-assistant__feedback button:focus-visible,
 .make-ai-assistant__attachment button:focus-visible,
 .make-ai-assistant__attachment-composer button:focus-visible,
 .make-ai-assistant__attachment-drafts button:focus-visible { outline: 2px solid var(--make-ai-internal-accent); outline-offset: 2px; }
 
+@media (hover: none), (pointer: coarse) {
+  .make-ai-assistant__attachment-draft-remove {
+    opacity: 1;
+    pointer-events: auto;
+    transform: scale(1);
+  }
+
+  .make-ai-assistant__conversation-row .make-ai-assistant__conversation-row-action {
+    opacity: 1;
+    pointer-events: auto;
+    transform: scale(1);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .make-ai-assistant__drawer,
   .make-ai-assistant__launcher-orbit,
@@ -2161,9 +2350,11 @@ 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__conversation-row-action,
+  .make-ai-assistant__attachment-draft-remove,
+  .make-ai-assistant__process,
   .make-ai-assistant__process summary::after {
     transition: none;
   }