@qfei-design/make-ai-assistant 0.1.7 → 0.1.9

package/dist/styles.css

@@ -51,27 +51,48 @@
 
 .make-ai-assistant__launcher {
   align-items: center;
-  background: var(--make-ai-internal-accent);
-  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 70%, var(--make-ai-internal-border));
+  background:
+    radial-gradient(circle at 34% 24%, rgb(255 255 255 / 34%), transparent 31%),
+    linear-gradient(
+      145deg,
+      color-mix(in srgb, var(--make-ai-internal-accent) 88%, #7d76ff),
+      var(--make-ai-internal-accent-strong)
+    );
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 54%, var(--make-ai-internal-border));
   border-radius: 50%;
-  bottom: 28px;
-  box-shadow: 0 10px 24px color-mix(in srgb, var(--make-ai-internal-accent) 22%, transparent);
+  bottom: auto;
+  box-shadow:
+    0 14px 30px color-mix(in srgb, var(--make-ai-internal-accent) 18%, transparent),
+    0 0 0 6px color-mix(in srgb, var(--make-ai-internal-accent) 7%, transparent),
+    inset 0 1px 0 rgb(255 255 255 / 38%);
   color: #fcfcff;
   cursor: pointer;
   display: flex;
   height: 50px;
   justify-content: center;
+  overflow: visible;
   padding: 0;
   position: fixed;
-  right: 28px;
-  transition: box-shadow 180ms ease, transform 180ms ease;
+  right: var(--make-ai-launcher-right, 18px);
+  top: var(--make-ai-launcher-top, 50%);
+  transform: translateY(-50%);
+  transition:
+    box-shadow 180ms cubic-bezier(.25, 1, .5, 1),
+    transform 180ms cubic-bezier(.25, 1, .5, 1);
   width: 50px;
   z-index: calc(var(--make-ai-internal-z-index) + 2);
 }
 
 .make-ai-assistant__launcher:hover {
-  box-shadow: 0 12px 28px color-mix(in srgb, var(--make-ai-internal-accent) 28%, transparent);
-  transform: translateY(-2px);
+  box-shadow:
+    0 16px 34px color-mix(in srgb, var(--make-ai-internal-accent) 22%, transparent),
+    0 0 0 8px color-mix(in srgb, var(--make-ai-internal-accent) 10%, transparent),
+    inset 0 1px 0 rgb(255 255 255 / 44%);
+  transform: translateY(-50%) scale(1.04);
+}
+
+.make-ai-assistant__launcher:active {
+  transform: translateY(-50%) scale(.98);
 }
 
 .make-ai-assistant__launcher:focus-visible,
@@ -84,18 +105,42 @@
 .make-ai-assistant__launcher > svg {
   fill: none;
   height: 26px;
+  position: relative;
   stroke: currentColor;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 1.75;
+  transform-origin: center;
+  transition: transform 180ms cubic-bezier(.25, 1, .5, 1);
   width: 26px;
+  z-index: 1;
+}
+
+.make-ai-assistant__launcher:hover > svg {
+  transform: rotate(8deg) scale(1.03);
 }
 
 .make-ai-assistant__launcher-orbit {
-  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 30%, transparent);
+  animation: make-ai-launcher-orbit 6s linear infinite, make-ai-launcher-breathe 2.8s cubic-bezier(.25, 1, .5, 1) infinite;
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 22%, transparent);
   border-radius: 50%;
-  inset: -5px;
+  inset: -6px;
+  opacity: .78;
+  pointer-events: none;
+  position: absolute;
+}
+
+.make-ai-assistant__launcher-orbit::before {
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 72%, #fcfcff);
+  border-radius: 50%;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--make-ai-internal-accent) 10%, transparent);
+  content: "";
+  height: 5px;
+  left: 50%;
   position: absolute;
+  top: -2px;
+  transform: translateX(-50%);
+  width: 5px;
 }
 
 .make-ai-assistant__drawer {
@@ -129,6 +174,7 @@
   display: grid;
   gap: 10px;
   grid-template-columns: auto 1fr auto;
+  grid-row: 1;
   min-height: 70px;
   padding: 14px 18px;
 }
@@ -216,6 +262,7 @@
   display: flex;
   font-size: .6875rem;
   gap: 7px;
+  grid-row: 2;
   line-height: 1.45;
   margin: 10px 18px 0;
   padding: 7px 9px;
@@ -247,6 +294,7 @@
 }
 
 .make-ai-assistant__body {
+  grid-row: 3;
   min-height: 0;
   min-width: 0;
   overflow: auto;
@@ -314,7 +362,7 @@
   align-items: center;
   display: flex;
   gap: 8px;
-  min-height: 26px;
+  min-height: 22px;
 }
 
 .make-ai-assistant__message--user .make-ai-assistant__message-identity {
@@ -329,8 +377,8 @@
 }
 
 .make-ai-assistant__message--assistant .make-ai-assistant__message-stack {
-  margin-left: 34px;
-  max-width: calc(100% - 34px);
+  margin-left: 30px;
+  max-width: calc(100% - 30px);
 }
 
 .make-ai-assistant__message--user .make-ai-assistant__message-stack {
@@ -357,13 +405,13 @@
 .make-ai-assistant__avatar--message,
 .make-ai-assistant__user-avatar {
   border-radius: 8px;
-  height: 26px;
-  width: 26px;
+  height: 22px;
+  width: 22px;
 }
 
 .make-ai-assistant__avatar--message svg {
-  height: 15px;
-  width: 15px;
+  height: 13px;
+  width: 13px;
 }
 
 .make-ai-assistant__user-avatar {
@@ -407,11 +455,50 @@
 }
 
 .make-ai-assistant__assistant-text p,
+.make-ai-assistant__assistant-text .make-ai-assistant__markdown-heading,
 .make-ai-assistant__assistant-text ul,
 .make-ai-assistant__assistant-text pre {
   margin: 0;
 }
 
+.make-ai-assistant__markdown-heading {
+  align-items: center;
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 4%, var(--make-ai-internal-surface));
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 8%, var(--make-ai-internal-border));
+  border-radius: 9px;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 54%);
+  color: color-mix(in srgb, var(--make-ai-internal-text) 94%, var(--make-ai-internal-accent));
+  display: flex;
+  font-size: 1.04em;
+  font-weight: 720;
+  gap: 6px;
+  letter-spacing: -.01em;
+  line-height: 1.45;
+  min-width: 0;
+  padding: 4px 8px 4px 12px;
+  position: relative;
+}
+
+.make-ai-assistant__markdown-heading::before {
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 62%, var(--make-ai-internal-text-secondary));
+  border-radius: 999px;
+  bottom: 7px;
+  content: "";
+  left: 5px;
+  position: absolute;
+  top: 7px;
+  width: 2px;
+}
+
+.make-ai-assistant__markdown-heading--3,
+.make-ai-assistant__markdown-heading--4,
+.make-ai-assistant__markdown-heading--5,
+.make-ai-assistant__markdown-heading--6 {
+  color: color-mix(in srgb, var(--make-ai-internal-text) 90%, var(--make-ai-internal-accent));
+  font-size: 1em;
+  font-weight: 680;
+}
+
 .make-ai-assistant__assistant-text p {
   min-width: 0;
 }
@@ -644,9 +731,11 @@
   cursor: pointer;
   font-size: var(--make-ai-internal-font-size-ui);
   font-weight: 600;
+  position: relative;
 }
 
-.make-ai-assistant__reply-copy {
+.make-ai-assistant__reply-copy,
+.make-ai-assistant__reply-regenerate {
   align-items: center;
   border: 1px solid transparent;
   display: inline-flex;
@@ -656,7 +745,8 @@
   width: 28px;
 }
 
-.make-ai-assistant__reply-copy svg {
+.make-ai-assistant__reply-copy svg,
+.make-ai-assistant__reply-regenerate svg {
   fill: none;
   height: 15px;
   stroke: currentColor;
@@ -666,17 +756,40 @@
   width: 15px;
 }
 
-.make-ai-assistant__reply-regenerate {
-  padding: 3px 0;
+.make-ai-assistant__reply-action[data-tooltip]::after,
+.make-ai-assistant__send[data-tooltip]::after {
+  background: color-mix(in srgb, var(--make-ai-internal-text) 94%, #000);
+  border-radius: 8px;
+  bottom: calc(100% + 7px);
+  box-shadow: 0 8px 18px rgb(30 31 43 / 18%);
+  color: #fcfcff;
+  content: attr(data-tooltip);
+  font-size: 11px;
+  font-weight: 600;
+  left: 50%;
+  line-height: 1;
+  opacity: 0;
+  padding: 6px 8px;
+  pointer-events: none;
+  position: absolute;
+  transform: translate(-50%, 2px);
+  transition: opacity 120ms ease, transform 120ms ease;
+  white-space: nowrap;
+  z-index: 3;
 }
 
-.make-ai-assistant__reply-copy:hover {
-  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);
+.make-ai-assistant__reply-action[data-tooltip]:hover::after,
+.make-ai-assistant__reply-action[data-tooltip]:focus-visible::after,
+.make-ai-assistant__send[data-tooltip]:hover::after,
+.make-ai-assistant__send[data-tooltip]:focus-visible::after {
+  opacity: 1;
+  transform: translate(-50%, 0);
 }
 
+.make-ai-assistant__reply-copy:hover,
 .make-ai-assistant__reply-regenerate:hover {
+  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);
 }
 
@@ -744,6 +857,7 @@
 .make-ai-assistant__composer-region {
   background: color-mix(in srgb, var(--make-ai-internal-bg) 94%, var(--make-ai-internal-surface));
   border-top: 1px solid var(--make-ai-internal-border);
+  grid-row: 4;
   box-shadow: 0 -8px 18px rgb(30 31 43 / 3%);
   padding: 10px 18px 9px;
 }
@@ -1030,6 +1144,16 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   to { opacity: 1; transform: translateX(0); }
 }
 
+@keyframes make-ai-launcher-orbit {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes make-ai-launcher-breathe {
+  0%, 100% { opacity: .58; }
+  50% { opacity: .92; }
+}
+
 @container (max-width: 360px) {
   .make-ai-assistant__header {
     gap: 8px;
@@ -1055,8 +1179,8 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   }
 
   .make-ai-assistant__message--assistant .make-ai-assistant__message-stack {
-    margin-left: 32px;
-    max-width: calc(100% - 32px);
+    margin-left: 30px;
+    max-width: calc(100% - 30px);
   }
 
   .make-ai-assistant__suggestions {
@@ -1085,7 +1209,7 @@ 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__launcher { bottom: 20px; right: 20px; }
+  .make-ai-assistant__launcher { right: var(--make-ai-launcher-mobile-right, 16px); }
   .make-ai-artifact__record {
     grid-template-columns: minmax(0, 1fr) auto;
   }
@@ -1112,7 +1236,10 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
     animation: none;
   }
   .make-ai-assistant__launcher,
+  .make-ai-assistant__launcher > svg,
   .make-ai-assistant__back-to-latest,
+  .make-ai-assistant__reply-action[data-tooltip]::after,
+  .make-ai-assistant__send[data-tooltip]::after,
   .make-ai-assistant__process summary::after {
     transition: none;
   }

package/package.ai.json

@@ -1,6 +1,6 @@
 {
   "packageName": "@qfei-design/make-ai-assistant",
-  "minimumRuntimeVersion": "0.1.2",
+  "minimumRuntimeVersion": "0.1.9",
   "readOrder": [
     "package.ai.json",
     "README.md",
@@ -15,9 +15,9 @@
     "ssrSupported": true
   },
   "install": {
-    "pnpm": "pnpm add @qfei-design/make-ai-assistant@^0.1.2",
-    "npm": "npm install @qfei-design/make-ai-assistant@^0.1.2",
-    "yarn": "yarn add @qfei-design/make-ai-assistant@^0.1.2"
+    "pnpm": "pnpm add @qfei-design/make-ai-assistant@^0.1.9",
+    "npm": "npm install @qfei-design/make-ai-assistant@^0.1.9",
+    "yarn": "yarn add @qfei-design/make-ai-assistant@^0.1.9"
   },
   "exports": [
     "@qfei-design/make-ai-assistant",

package/package.json

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