@qfei-design/make-ai-assistant 0.1.8 → 0.2.0

package/dist/styles.css

@@ -51,27 +51,53 @@
 
 .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 / 56%), transparent 31%),
+    radial-gradient(
+      circle at 70% 78%,
+      color-mix(in srgb, var(--make-ai-internal-accent) 24%, transparent),
+      transparent 46%
+    ),
+    linear-gradient(
+      145deg,
+      color-mix(in srgb, var(--make-ai-internal-accent) 68%, #fcfcff),
+      color-mix(in srgb, var(--make-ai-internal-accent) 72%, #bdb8ff)
+    );
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 34%, 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 12px 26px color-mix(in srgb, var(--make-ai-internal-accent) 14%, transparent),
+    0 0 0 6px color-mix(in srgb, var(--make-ai-internal-accent) 5%, transparent),
+    inset 0 1px 0 rgb(255 255 255 / 58%);
   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 14px 30px color-mix(in srgb, var(--make-ai-internal-accent) 17%, transparent),
+    0 0 0 8px color-mix(in srgb, var(--make-ai-internal-accent) 7%, transparent),
+    inset 0 1px 0 rgb(255 255 255 / 64%);
+  transform: translateY(-50%) scale(1.04);
+}
+
+.make-ai-assistant__launcher:active {
+  transform: translateY(-50%) scale(.98);
 }
 
 .make-ai-assistant__launcher:focus-visible,
@@ -82,20 +108,46 @@
 }
 
 .make-ai-assistant__launcher > svg {
+  animation: make-ai-launcher-sparkle 2.4s cubic-bezier(.25, 1, .5, 1) infinite;
   fill: none;
   height: 26px;
+  position: relative;
+  filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--make-ai-internal-accent) 22%, transparent));
   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 {
+  animation-duration: 1.6s;
 }
 
 .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) 16%, 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) 52%, #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 {
@@ -354,7 +406,7 @@
 }
 
 .make-ai-assistant__message--user .make-ai-assistant__message-sender {
-  color: color-mix(in srgb, var(--make-ai-internal-accent) 72%, var(--make-ai-internal-text));
+  color: color-mix(in srgb, var(--make-ai-internal-text-secondary) 76%, var(--make-ai-internal-accent));
 }
 
 .make-ai-assistant__avatar--message,
@@ -392,10 +444,10 @@
 }
 
 .make-ai-assistant__message--user .make-ai-assistant__bubble {
-  background: color-mix(in srgb, var(--make-ai-internal-accent) 10%, var(--make-ai-internal-surface));
-  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 12%, var(--make-ai-internal-border));
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 4%, var(--make-ai-internal-bg));
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 7%, var(--make-ai-internal-border));
   border-radius: 16px 5px 16px 16px;
-  color: color-mix(in srgb, var(--make-ai-internal-accent) 68%, var(--make-ai-internal-text));
+  color: color-mix(in srgb, var(--make-ai-internal-text) 82%, var(--make-ai-internal-accent));
   padding: 10px 13px;
   white-space: pre-wrap;
 }
@@ -410,11 +462,38 @@
 }
 
 .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) 2%, var(--make-ai-internal-bg));
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 5%, var(--make-ai-internal-border));
+  border-radius: 9px;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 36%);
+  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;
+}
+
+.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;
 }
@@ -647,9 +726,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;
@@ -659,7 +740,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;
@@ -669,17 +751,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);
 }
 
@@ -1034,6 +1139,31 @@ 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; }
+}
+
+@keyframes make-ai-launcher-sparkle {
+  0%, 100% {
+    opacity: .9;
+    transform: rotate(0deg) scale(.96);
+  }
+  42% {
+    opacity: 1;
+    transform: rotate(4deg) scale(1.08);
+  }
+  68% {
+    opacity: .96;
+    transform: rotate(-2deg) scale(1);
+  }
+}
+
 @container (max-width: 360px) {
   .make-ai-assistant__header {
     gap: 8px;
@@ -1089,7 +1219,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;
   }
@@ -1111,12 +1241,16 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
 @media (prefers-reduced-motion: reduce) {
   .make-ai-assistant__drawer,
   .make-ai-assistant__launcher-orbit,
+  .make-ai-assistant__launcher > svg,
   .make-ai-assistant__progress > span:first-child,
   .make-ai-assistant__typing span {
     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.2.0",
   "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.2.0",
+    "npm": "npm install @qfei-design/make-ai-assistant@^0.2.0",
+    "yarn": "yarn add @qfei-design/make-ai-assistant@^0.2.0"
   },
   "exports": [
     "@qfei-design/make-ai-assistant",

package/package.json

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