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

package/README.md

@@ -5,7 +5,7 @@
 ## Install
 
 ```bash
-pnpm add @qfei-design/make-ai-assistant@^0.1.9
+pnpm add @qfei-design/make-ai-assistant@^0.2.0
 ```
 
 ## Quick start

package/dist/styles.css

@@ -52,19 +52,24 @@
 .make-ai-assistant__launcher {
   align-items: center;
   background:
-    radial-gradient(circle at 34% 24%, rgb(255 255 255 / 34%), transparent 31%),
+    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) 88%, #7d76ff),
-      var(--make-ai-internal-accent-strong)
+      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) 54%, var(--make-ai-internal-border));
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 34%, var(--make-ai-internal-border));
   border-radius: 50%;
   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%);
+    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;
@@ -85,9 +90,9 @@
 
 .make-ai-assistant__launcher:hover {
   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%);
+    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);
 }
 
@@ -103,9 +108,11 @@
 }
 
 .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;
@@ -117,12 +124,12 @@
 }
 
 .make-ai-assistant__launcher:hover > svg {
-  transform: rotate(8deg) scale(1.03);
+  animation-duration: 1.6s;
 }
 
 .make-ai-assistant__launcher-orbit {
   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: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 16%, transparent);
   border-radius: 50%;
   inset: -6px;
   opacity: .78;
@@ -131,7 +138,7 @@
 }
 
 .make-ai-assistant__launcher-orbit::before {
-  background: color-mix(in srgb, var(--make-ai-internal-accent) 72%, #fcfcff);
+  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: "";
@@ -399,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,
@@ -437,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;
 }
@@ -463,10 +470,10 @@
 
 .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));
+  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 / 54%);
+  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;
@@ -475,19 +482,7 @@
   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;
+  padding: 4px 8px;
 }
 
 .make-ai-assistant__markdown-heading--3,
@@ -1154,6 +1149,21 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
   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;
@@ -1231,6 +1241,7 @@ 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;

package/package.ai.json

@@ -1,6 +1,6 @@
 {
   "packageName": "@qfei-design/make-ai-assistant",
-  "minimumRuntimeVersion": "0.1.9",
+  "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.9",
-    "npm": "npm install @qfei-design/make-ai-assistant@^0.1.9",
-    "yarn": "yarn add @qfei-design/make-ai-assistant@^0.1.9"
+    "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.9",
+  "version": "0.2.0",
   "description": "Platform-wide Make AI Assistant contracts, React shell, and context-aware artifact templates.",
   "type": "module",
   "sideEffects": [