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

package/dist/styles.css

@@ -20,10 +20,8 @@
   --make-ai-internal-on-overlay: #fff;
   --make-ai-internal-overlay-shadow: #3549701f;
   --make-ai-internal-highlight: color-mix(in srgb, #fff 58%, transparent);
-  --make-ai-internal-drawer-min-width: var(--make-ai-drawer-width, 480px);
-  --make-ai-internal-drawer-width: var(--make-ai-internal-drawer-min-width);
-  --make-ai-internal-drawer-max-width: max(var(--make-ai-internal-drawer-min-width), min(1024px, 72vw));
-  --make-ai-internal-drawer-resize-line: var(--make-ai-drawer-resize-line, var(--make-ai-internal-accent));
+  --make-ai-internal-drawer-width: var(--make-ai-drawer-width, 560px);
+  --make-ai-internal-drawer-max-width: max(var(--make-ai-internal-drawer-width), min(1024px, 72vw));
   --make-ai-internal-z-index: var(--make-ai-z-index, 1050);
   --make-ai-internal-font-size-heading: var(--make-ai-font-size-heading, .875rem);
   --make-ai-internal-font-size-body: var(--make-ai-font-size-body, .8125rem);
@@ -229,42 +227,11 @@
   animation: make-ai-drawer-in 180ms cubic-bezier(.2, .75, .35, 1);
 }
 
-.make-ai-assistant__drawer-resize-handle {
-  background: transparent;
-  border: 0;
-  bottom: 0;
-  cursor: ew-resize;
-  left: -6px;
-  outline: 0;
-  position: absolute;
-  top: 0;
-  touch-action: none;
-  width: 12px;
-  z-index: 1;
-}
-
-.make-ai-assistant__drawer-resize-handle::after {
-  background: var(--make-ai-internal-drawer-resize-line);
-  border-radius: 999px;
-  content: "";
-  height: 100%;
-  left: 50%;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  transform: translateX(-50%);
-  transition: opacity 160ms ease;
-  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: 1;
-}
-
-.make-ai-assistant__drawer-resize-handle:focus-visible {
-  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--make-ai-internal-accent) 35%, transparent);
+.make-ai-assistant__drawer--fullscreen {
+  border-left: 0;
+  inset: 0;
+  max-width: none;
+  width: 100vw;
 }
 
 .make-ai-assistant__panel {
@@ -327,7 +294,6 @@
 
 .make-ai-assistant__avatar svg,
 .make-ai-assistant__icon-button svg,
-.make-ai-assistant__task-list-trigger svg,
 .make-ai-assistant__send svg {
   fill: none;
   height: 20px;
@@ -356,6 +322,18 @@
   color: var(--make-ai-internal-text);
 }
 
+.make-ai-assistant__icon-button-icon {
+  display: inline-flex;
+  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;
@@ -391,13 +369,13 @@
 
 .make-ai-assistant__task-list-trigger {
   align-items: center;
-  background: var(--make-ai-internal-surface-strong);
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 5%, var(--make-ai-internal-bg));
   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-caption);
+  font-size: 14px;
   gap: 6px;
   height: 34px;
   max-width: 118px;
@@ -407,23 +385,30 @@
 
 .make-ai-assistant__task-list-trigger:hover,
 .make-ai-assistant__task-list-trigger[aria-expanded="true"] {
-  background: color-mix(in srgb, var(--make-ai-internal-accent) 8%, var(--make-ai-internal-surface-strong));
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 8%, var(--make-ai-internal-bg));
   color: var(--make-ai-internal-text);
 }
 
-.make-ai-assistant__task-list-trigger svg:first-child {
+.make-ai-assistant__task-list-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
   height: 19px;
+  line-height: 0;
   width: 19px;
 }
 
-.make-ai-assistant__task-list-trigger svg:last-child {
+.make-ai-assistant__task-list-disclosure {
+  display: inline-flex;
+  flex: 0 0 auto;
   height: 15px;
-  transition: transform 160ms ease;
+  line-height: 0;
   width: 15px;
 }
 
-.make-ai-assistant__task-list-trigger[aria-expanded="true"] svg:last-child {
-  transform: rotate(180deg);
+.make-ai-assistant__task-list-icon svg,
+.make-ai-assistant__task-list-disclosure svg {
+  height: 100%;
+  width: 100%;
 }
 
 .make-ai-assistant__header-title {
@@ -936,24 +921,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 {
@@ -976,49 +981,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);
@@ -1040,7 +1130,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;
@@ -1050,8 +1141,9 @@
   width: 28px;
 }
 
-.make-ai-assistant__reply-copy svg,
-.make-ai-assistant__reply-regenerate svg {
+.make-ai-assistant__reply-copy > svg,
+.make-ai-assistant__reply-regenerate > svg,
+.make-ai-assistant__reply-feedback-action > svg {
   fill: none;
   height: 15px;
   stroke: currentColor;
@@ -1061,6 +1153,25 @@
   width: 15px;
 }
 
+.make-ai-assistant__reply-copy-icon,
+.make-ai-assistant__reply-feedback-icon {
+  display: inline-flex;
+  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;
+}
+
 .make-ai-assistant__reply-action[data-tooltip]::after,
 .make-ai-assistant__send[data-tooltip]::after {
   background: var(--make-ai-internal-overlay);
@@ -1092,7 +1203,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);
@@ -1231,13 +1344,14 @@
 .make-ai-assistant__composer {
   background: var(--make-ai-internal-surface);
   border: 1px solid var(--make-ai-internal-border);
-  border-radius: 15px;
-  display: grid;
-  gap: 7px 10px;
-  grid-template-columns: minmax(0, 1fr) auto;
-  grid-template-rows: minmax(46px, auto) 36px;
-  min-height: 96px;
-  padding: 10px 10px 8px;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: min(440px, 46vh);
+  min-height: 132px;
+  overflow: auto;
+  padding: 12px 14px 10px;
   transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
 }
 
@@ -1255,12 +1369,11 @@
   color: var(--make-ai-internal-text);
   font-size: var(--make-ai-internal-font-size-body);
   line-height: var(--make-ai-internal-line-height-body);
-  grid-column: 1 / -1;
-  grid-row: 1;
-  max-height: 128px;
-  min-height: 46px;
+  max-height: 192px;
+  min-height: 72px;
   outline: 0;
-  padding: 2px 5px;
+  overflow-y: auto;
+  padding: 3px 4px;
   resize: none;
   width: 100%;
 }
@@ -1293,9 +1406,13 @@
   align-items: center;
   display: flex;
   gap: 7px;
-  grid-column: 2;
-  grid-row: 2;
-  justify-self: end;
+}
+
+.make-ai-assistant__composer-toolbar {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  min-height: 34px;
 }
 
 .make-ai-assistant__send::before {
@@ -1545,8 +1662,8 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
     padding: 0 8px;
   }
 
-  .make-ai-assistant__task-list-trigger > span,
-  .make-ai-assistant__task-list-trigger svg:last-child {
+  .make-ai-assistant__task-list-label,
+  .make-ai-assistant__task-list-disclosure {
     display: none;
   }
 
@@ -1684,7 +1801,6 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 
 @media (max-width: 560px) {
   .make-ai-assistant__drawer { width: 100vw; }
-  .make-ai-assistant__drawer-resize-handle { display: none; }
   .make-ai-assistant__launcher {
     bottom: var(--make-ai-launcher-mobile-bottom, var(--make-ai-launcher-bottom, 16px));
     left: auto;
@@ -1742,7 +1858,7 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   border: 1px solid var(--make-ai-internal-border);
   border-radius: 12px;
   box-shadow: 0 14px 34px color-mix(in srgb, var(--make-ai-internal-text) 12%, transparent);
-  font-size: var(--make-ai-internal-font-size-meta);
+  font-size: 14px;
   left: var(--make-ai-internal-panel-gutter);
   max-height: min(430px, calc(100% - var(--make-ai-internal-header-height) - 24px));
   overflow: auto;
@@ -1784,26 +1900,43 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 
 .make-ai-assistant__conversation-row {
   align-items: center;
+  border-radius: 8px;
+  box-sizing: border-box;
   display: flex;
-  gap: 2px;
+  gap: 0;
+  height: 40px;
   min-width: 0;
+  padding: 2px 4px;
+}
+
+.make-ai-assistant__conversation-row:hover,
+.make-ai-assistant__conversation-row:focus-within {
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 4%, var(--make-ai-internal-bg));
 }
 
-.make-ai-assistant__conversation-row > button:first-child {
+.make-ai-assistant__conversation-row[data-active="true"] {
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 8%, var(--make-ai-internal-bg));
+}
+
+.make-ai-assistant__conversation-row .make-ai-assistant__conversation-row-select {
   align-items: center;
+  background: transparent;
   border-color: transparent;
+  box-sizing: border-box;
   display: flex;
   flex: 1;
   gap: 8px;
-  min-height: 36px;
+  height: 36px;
+  min-height: 0;
   min-width: 0;
   overflow: hidden;
-  padding: 0 8px;
+  padding: 0 6px;
   text-align: left;
 }
 
-.make-ai-assistant__conversation-row > button:first-child svg,
-.make-ai-assistant__conversation-new 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;
   height: 16px;
@@ -1814,26 +1947,181 @@ 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-action-icon {
+  display: inline-flex;
+  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;
+  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;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.make-ai-assistant__conversation-row > button[aria-pressed="true"] {
-  background: var(--make-ai-internal-accent-soft);
+.make-ai-assistant__conversation-row .make-ai-assistant__conversation-row-select[aria-pressed="true"] {
+  background: transparent;
   color: var(--make-ai-internal-accent);
 }
 
-.make-ai-assistant__conversation-row > button:last-child {
+.make-ai-assistant__conversation-row-actions {
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  flex: 0 0 auto;
+  gap: 0;
+  height: 36px;
+}
+
+.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);
+  display: inline-flex;
   flex: 0 0 auto;
-  height: 30px;
+  height: 28px;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
   padding: 0;
-  width: 30px;
+  position: relative;
+  width: 28px;
+}
+
+.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-row-pin[aria-pressed="true"] {
+  color: var(--make-ai-internal-accent);
+}
+
+.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 {
+  align-self: stretch;
+  background: var(--make-ai-internal-surface);
+  border: 1px solid var(--make-ai-internal-border);
+  border-radius: 6px;
+  box-sizing: border-box;
+  color: inherit;
+  flex: 1;
+  font: inherit;
+  height: 36px;
+  min-width: 0;
+  padding: 0 8px;
+}
+
+.make-ai-assistant__conversation-delete-confirmation {
+  align-items: center;
+  align-self: stretch;
+  background: color-mix(in srgb, var(--make-ai-internal-danger) 7%, var(--make-ai-internal-bg));
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-danger) 24%, var(--make-ai-internal-border));
+  border-radius: 7px;
+  box-sizing: border-box;
+  color: var(--make-ai-internal-danger);
+  display: flex;
+  flex: 1 1 0;
+  gap: 4px;
+  height: 36px;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0 4px 0 8px;
+}
+
+.make-ai-assistant__conversation-delete-confirmation-icon {
+  display: inline-flex;
+  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;
+  font-size: var(--make-ai-internal-font-size-meta);
+  font-weight: 600;
+  line-height: var(--make-ai-internal-line-height-meta);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.make-ai-assistant__conversation-delete-confirmation .make-ai-assistant__conversation-delete-confirmation-confirm {
+  background: color-mix(in srgb, var(--make-ai-internal-danger) 12%, var(--make-ai-internal-bg));
+  border-color: color-mix(in srgb, var(--make-ai-internal-danger) 24%, var(--make-ai-internal-border));
+  color: var(--make-ai-internal-danger);
+}
+
+.make-ai-assistant__conversation-delete-confirmation .make-ai-assistant__conversation-delete-confirmation-confirm:hover {
+  background: color-mix(in srgb, var(--make-ai-internal-danger) 18%, var(--make-ai-internal-bg));
+  border-color: color-mix(in srgb, var(--make-ai-internal-danger) 40%, var(--make-ai-internal-border));
+}
+
+.make-ai-assistant__conversation-delete-confirmation .make-ai-assistant__conversation-delete-confirmation-cancel {
+  color: var(--make-ai-internal-text-secondary);
 }
 
 .make-ai-assistant__conversation-more,
@@ -1843,33 +2131,29 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   color: var(--make-ai-internal-text-secondary) !important;
 }
 
+.make-ai-assistant__conversation-refresh {
+  align-items: center;
+  display: inline-flex;
+  height: 28px;
+  justify-content: center;
+  padding: 0 !important;
+  width: 28px;
+}
+
 .make-ai-assistant__conversation-more {
   margin-top: 4px;
   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 {
@@ -1901,7 +2185,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);
@@ -1911,12 +2194,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; }
@@ -1925,9 +2217,6 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 .make-ai-assistant__attachment-composer {
   align-self: center;
   font-size: var(--make-ai-internal-font-size-meta);
-  grid-column: 1;
-  grid-row: 2;
-  justify-self: start;
   position: relative;
 }
 
@@ -1952,7 +2241,7 @@ 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-trigger > svg,
 .make-ai-assistant__attachment-menu svg {
   fill: none;
   height: 18px;
@@ -1963,6 +2252,18 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   width: 18px;
 }
 
+.make-ai-assistant__attachment-trigger-icon {
+  display: inline-flex;
+  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);
@@ -1996,10 +2297,11 @@ 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);
   font-size: var(--make-ai-internal-font-size-meta);
-  max-height: 140px;
+  max-height: 184px;
   overflow: auto;
-  padding-bottom: 8px;
+  padding: 0 0 12px;
 }
 
 .make-ai-assistant__attachment-drafts ul {
@@ -2015,11 +2317,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: 56px;
+  padding: 4px 26px 4px 4px;
+  position: relative;
 }
 
 .make-ai-assistant__attachment-drafts button {
@@ -2030,12 +2334,197 @@ 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: 44px;
+  object-fit: cover;
+  width: 44px;
+}
+
+.make-ai-assistant__attachment-draft-preview-button {
+  border-radius: 7px;
+  cursor: zoom-in;
+  flex: 0 0 auto;
+  line-height: 0;
+  overflow: hidden;
+  padding: 0 !important;
+}
+
+.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));
+}
+
+.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: 20px;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.6;
+  width: 20px;
+}
+
+.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-draft-remove-icon,
+.make-ai-assistant__attachment-preview-close-icon {
+  display: inline-flex;
+  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;
+  pointer-events: auto;
+  transform: scale(1);
+}
+
+.make-ai-assistant__attachment-preview-backdrop {
+  align-items: center;
+  background: color-mix(in srgb, var(--make-ai-internal-text) 46%, transparent);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  padding: 24px;
+  position: fixed;
+  z-index: calc(var(--make-ai-internal-z-index) + 10);
+}
+
+.make-ai-assistant__attachment-preview-dialog {
+  background: var(--make-ai-internal-surface);
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-border) 80%, transparent);
+  border-radius: 14px;
+  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);
+  padding: 8px;
+  position: relative;
+}
+
+.make-ai-assistant__attachment-preview-dialog img {
+  display: block;
+  height: 100%;
+  max-height: min(76vh, 744px);
+  max-width: min(88vw, 944px);
+  object-fit: contain;
+  width: 100%;
+}
+
+.make-ai-assistant__attachment-preview-close {
+  align-items: center;
+  background: var(--make-ai-internal-overlay) !important;
+  border: 0 !important;
+  border-radius: 50% !important;
+  color: var(--make-ai-internal-on-overlay) !important;
+  cursor: pointer;
+  display: inline-flex;
+  height: 28px;
+  justify-content: center;
+  padding: 0 !important;
+  position: absolute;
+  right: 14px;
+  top: 14px;
+  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__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,
@@ -2047,14 +2536,13 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   .make-ai-assistant__launcher,
   .make-ai-assistant__launcher > svg,
   .make-ai-assistant__back-to-latest,
-  .make-ai-assistant__drawer-resize-handle::after,
   .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;
   }
 
-  .make-ai-assistant__task-list-trigger svg:last-child {
-    transition: none;
-  }
 }