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

package/dist/styles.css

@@ -283,8 +283,8 @@
   background: var(--make-ai-internal-bg);
   border-bottom: 1px solid var(--make-ai-internal-border);
   display: grid;
-  gap: 8px;
-  grid-template-columns: auto 1fr auto;
+  gap: 10px;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   grid-row: 1;
   height: var(--make-ai-internal-header-height);
   min-height: var(--make-ai-internal-header-height);
@@ -327,6 +327,7 @@
 
 .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;
@@ -359,6 +360,71 @@
   align-items: center;
   display: flex;
   gap: 2px;
+  justify-self: end;
+  min-width: 0;
+}
+
+.make-ai-assistant__header-leading {
+  justify-self: start;
+  min-width: 0;
+}
+
+.make-ai-assistant__header-center {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  justify-self: center;
+  max-width: min(100%, 310px);
+  min-width: 0;
+}
+
+.make-ai-assistant__header-center > .make-ai-assistant__avatar {
+  border-radius: 50%;
+  height: 30px;
+  width: 30px;
+}
+
+.make-ai-assistant__header-center > .make-ai-assistant__avatar svg {
+  height: 17px;
+  width: 17px;
+}
+
+.make-ai-assistant__task-list-trigger {
+  align-items: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  color: var(--make-ai-internal-text-secondary);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--make-ai-internal-font-size-meta);
+  gap: 6px;
+  height: 34px;
+  max-width: 118px;
+  padding: 0 8px;
+  white-space: nowrap;
+}
+
+.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));
+  color: var(--make-ai-internal-text);
+}
+
+.make-ai-assistant__task-list-trigger svg:first-child {
+  height: 17px;
+  width: 17px;
+}
+
+.make-ai-assistant__task-list-trigger svg:last-child {
+  height: 12px;
+  transition: transform 160ms ease;
+  width: 12px;
+}
+
+.make-ai-assistant__task-list-trigger[aria-expanded="true"] svg:last-child {
+  transform: rotate(180deg);
 }
 
 .make-ai-assistant__header-content,
@@ -375,6 +441,7 @@
 
 .make-ai-assistant__header-title-row {
   gap: 8px;
+  justify-content: center;
 }
 
 .make-ai-assistant__header-title {
@@ -385,6 +452,17 @@
   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));
@@ -399,6 +477,7 @@
 
 .make-ai-assistant__header-context {
   gap: 6px;
+  justify-content: center;
   margin-top: 1px;
 }
 
@@ -1260,14 +1339,15 @@
 }
 
 .make-ai-assistant__composer {
-  align-items: flex-end;
   background: var(--make-ai-internal-surface);
   border: 1px solid var(--make-ai-internal-border);
   border-radius: 15px;
-  display: flex;
-  gap: 9px;
-  min-height: 54px;
-  padding: 7px 8px 7px 12px;
+  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;
   transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
 }
 
@@ -1285,10 +1365,12 @@
   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: 112px;
-  min-height: 38px;
+  grid-column: 1 / -1;
+  grid-row: 1;
+  max-height: 128px;
+  min-height: 46px;
   outline: 0;
-  padding: 4px 0 2px;
+  padding: 2px 5px;
   resize: none;
   width: 100%;
 }
@@ -1312,12 +1394,20 @@
   flex: 0 0 auto;
   height: 34px;
   justify-content: center;
-  margin-bottom: 2px;
   position: relative;
   transition: background 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
   width: 34px;
 }
 
+.make-ai-assistant__composer-actions {
+  align-items: center;
+  display: flex;
+  gap: 7px;
+  grid-column: 2;
+  grid-row: 2;
+  justify-self: end;
+}
+
 .make-ai-assistant__send::before {
   content: "";
   inset: -5px;
@@ -1555,11 +1645,33 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 
 @container (max-width: 360px) {
   .make-ai-assistant__header {
-    gap: 8px;
-    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: 6px;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
     padding: 7px var(--make-ai-internal-panel-gutter-compact);
   }
 
+  .make-ai-assistant__task-list-trigger {
+    max-width: 34px;
+    padding: 0 8px;
+  }
+
+  .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 {
+    display: none;
+  }
+
+  .make-ai-assistant__header-center {
+    gap: 6px;
+  }
+
+  .make-ai-assistant__header-center > .make-ai-assistant__avatar {
+    height: 26px;
+    width: 26px;
+  }
+
   .make-ai-assistant__body {
     padding: 16px var(--make-ai-internal-panel-gutter-compact) 24px;
   }
@@ -1739,29 +1851,171 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 }
 
 .make-ai-assistant__conversation-controls {
-  border-bottom: 1px solid var(--make-ai-internal-border);
-  flex: 0 0 auto;
+  background: var(--make-ai-internal-surface);
+  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);
-  max-height: 240px;
+  left: var(--make-ai-internal-panel-gutter);
+  max-height: min(430px, calc(100% - var(--make-ai-internal-header-height) - 24px));
   overflow: auto;
-  padding: 8px 12px;
+  padding: 12px 8px 8px;
+  position: absolute;
+  top: calc(var(--make-ai-internal-header-height) + 8px);
+  width: min(300px, calc(100% - var(--make-ai-internal-panel-gutter) * 2));
+  z-index: calc(var(--make-ai-internal-z-index) + 1);
+}
+
+.make-ai-assistant__panel--managed {
+  grid-template-rows: auto minmax(0, 1fr) auto;
 }
-.make-ai-assistant__panel--managed { grid-template-rows: auto auto minmax(0, 1fr) auto; }
-.make-ai-assistant__panel--managed > .make-ai-assistant__conversation-controls { grid-row: 2; }
-.make-ai-assistant__panel--managed > .make-ai-assistant__body { grid-row: 3; }
-.make-ai-assistant__panel--managed > .make-ai-assistant__composer-region { grid-row: 4; }
+
 .make-ai-assistant__response-status { color: var(--make-ai-internal-text-secondary); font-size: var(--make-ai-internal-font-size-meta); }
 
-.make-ai-assistant__conversation-list { max-height: 130px; overflow: auto; }
-.make-ai-assistant__conversation-row { display: flex; gap: 4px; margin-bottom: 4px; }
-.make-ai-assistant__conversation-row > button:first-child { flex: 1; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
-.make-ai-assistant__conversation-row > button[aria-pressed="true"] { background: var(--make-ai-internal-accent-soft); color: var(--make-ai-internal-accent); }
-.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; }
+.make-ai-assistant__conversation-heading {
+  align-items: center;
+  color: var(--make-ai-internal-text-secondary);
+  display: flex;
+  font-size: var(--make-ai-internal-font-size-caption);
+  justify-content: space-between;
+  letter-spacing: .02em;
+  min-height: 26px;
+  padding: 0 7px 6px;
+}
+
+.make-ai-assistant__conversation-list {
+  max-height: 220px;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.make-ai-assistant__conversation-list > p {
+  color: var(--make-ai-internal-text-secondary);
+  margin: 16px 8px;
+  text-align: center;
+}
+
+.make-ai-assistant__conversation-row {
+  align-items: center;
+  display: flex;
+  gap: 2px;
+  min-width: 0;
+}
+
+.make-ai-assistant__conversation-row > button:first-child {
+  align-items: center;
+  border-color: transparent;
+  display: flex;
+  flex: 1;
+  gap: 8px;
+  min-height: 36px;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0 8px;
+  text-align: left;
+}
+
+.make-ai-assistant__conversation-row > button:first-child svg,
+.make-ai-assistant__conversation-new svg {
+  fill: none;
+  flex: 0 0 auto;
+  height: 16px;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.7;
+  width: 16px;
+}
+
+.make-ai-assistant__conversation-row > button:first-child 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);
+  color: var(--make-ai-internal-accent);
+}
+
+.make-ai-assistant__conversation-row > button:last-child {
+  background: transparent;
+  border-color: transparent;
+  color: var(--make-ai-internal-text-secondary);
+  flex: 0 0 auto;
+  height: 30px;
+  padding: 0;
+  width: 30px;
+}
+
+.make-ai-assistant__conversation-more,
+.make-ai-assistant__conversation-refresh {
+  background: transparent !important;
+  border-color: transparent !important;
+  color: var(--make-ai-internal-text-secondary) !important;
+}
+
+.make-ai-assistant__conversation-more {
+  margin-top: 4px;
+  width: 100%;
+}
+
+.make-ai-assistant__conversation-management {
+  border-top: 1px solid var(--make-ai-internal-border);
+  margin-top: 8px;
+  padding: 8px 7px 0;
+}
+
+.make-ai-assistant__conversation-management summary {
+  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;
+}
+
+.make-ai-assistant__conversation-error {
+  color: var(--make-ai-internal-danger);
+  display: grid;
+  gap: 6px;
+  padding: 8px 7px 0;
+}
+
+.make-ai-assistant__conversation-new {
+  align-items: center;
+  background: transparent !important;
+  border-color: transparent !important;
+  border-radius: 8px !important;
+  border-top: 1px solid var(--make-ai-internal-border) !important;
+  color: var(--make-ai-internal-accent) !important;
+  display: flex;
+  font-weight: 650 !important;
+  gap: 8px;
+  justify-content: flex-start;
+  margin-top: 8px;
+  min-height: 40px;
+  padding: 8px !important;
+  width: 100%;
+}
+
+.make-ai-assistant__conversation-new:hover {
+  background: var(--make-ai-internal-accent-soft) !important;
+}
+
 .make-ai-assistant__conversation-controls button,
 .make-ai-assistant__feedback button,
-.make-ai-assistant__attachment button,
-.make-ai-assistant__attachment-composer button {
+.make-ai-assistant__attachment button {
   background: var(--make-ai-internal-surface);
   border: 1px solid var(--make-ai-internal-border);
   border-radius: 6px;
@@ -1780,14 +2034,120 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 .make-ai-assistant__attachment img,
 .make-ai-assistant__attachment video { max-height: 260px; max-width: 100%; object-fit: contain; }
 .make-ai-assistant__attachment audio { max-width: 100%; }
-.make-ai-assistant__attachment-composer { font-size: var(--make-ai-internal-font-size-meta); max-height: 140px; overflow: auto; padding-bottom: 8px; }
-.make-ai-assistant__attachment-composer input { max-width: 100%; }
-.make-ai-assistant__attachment-composer ul { list-style: none; margin: 6px 0 0; padding: 0; }
-.make-ai-assistant__attachment-composer li { align-items: center; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0; }
+
+.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;
+}
+
+.make-ai-assistant__attachment-trigger {
+  align-items: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 50%;
+  color: var(--make-ai-internal-text-secondary);
+  cursor: pointer;
+  display: flex;
+  height: 34px;
+  justify-content: center;
+  padding: 0;
+  width: 34px;
+}
+
+.make-ai-assistant__attachment-trigger:hover,
+.make-ai-assistant__attachment-trigger[aria-expanded="true"] {
+  background: var(--make-ai-internal-surface-strong);
+  border-color: color-mix(in srgb, var(--make-ai-internal-accent) 24%, var(--make-ai-internal-border));
+  color: var(--make-ai-internal-text);
+}
+
+.make-ai-assistant__attachment-trigger svg,
+.make-ai-assistant__attachment-menu svg {
+  fill: none;
+  height: 18px;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.7;
+  width: 18px;
+}
+
+.make-ai-assistant__attachment-menu {
+  background: var(--make-ai-internal-surface);
+  border: 1px solid var(--make-ai-internal-border);
+  border-radius: 10px;
+  bottom: calc(100% + 8px);
+  box-shadow: 0 12px 28px color-mix(in srgb, var(--make-ai-internal-text) 12%, transparent);
+  left: 0;
+  min-width: 168px;
+  padding: 5px;
+  position: absolute;
+  z-index: calc(var(--make-ai-internal-z-index) + 2);
+}
+
+.make-ai-assistant__attachment-menu button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 7px;
+  color: var(--make-ai-internal-text);
+  cursor: pointer;
+  display: flex;
+  gap: 9px;
+  min-height: 38px;
+  padding: 0 10px;
+  text-align: left;
+  width: 100%;
+}
+
+.make-ai-assistant__attachment-menu button:hover {
+  background: var(--make-ai-internal-surface-strong);
+}
+
+.make-ai-assistant__attachment-drafts {
+  font-size: var(--make-ai-internal-font-size-meta);
+  max-height: 140px;
+  overflow: auto;
+  padding-bottom: 8px;
+}
+
+.make-ai-assistant__attachment-drafts ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.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: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 5px 7px;
+}
+
+.make-ai-assistant__attachment-drafts button {
+  background: transparent;
+  border: 0;
+  color: var(--make-ai-internal-accent);
+  cursor: pointer;
+  padding: 2px 4px;
+}
+
 .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 { outline: 2px solid var(--make-ai-internal-accent); outline-offset: 2px; }
+.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 (prefers-reduced-motion: reduce) {
   .make-ai-assistant__drawer,
@@ -1807,4 +2167,8 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   .make-ai-assistant__process summary::after {
     transition: none;
   }
+
+  .make-ai-assistant__task-list-trigger svg:last-child {
+    transition: none;
+  }
 }

package/package.json

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