@qfei-design/make-ai-assistant 0.1.2 → 0.1.4

package/dist/styles.css

@@ -1,19 +1,19 @@
 :where(.make-ai-assistant, .make-ai-artifact) {
   --make-ai-internal-accent: var(--make-ai-accent, var(--make-color-primary, #5147f3));
   --make-ai-internal-accent-strong: var(--make-ai-accent-strong, var(--make-color-primary-hover, #4037da));
-  --make-ai-internal-accent-soft: var(--make-ai-accent-soft, color-mix(in srgb, var(--make-ai-internal-accent) 10%, white));
-  --make-ai-internal-bg: var(--make-ai-bg, var(--make-color-bg, #ffffff));
-  --make-ai-internal-surface: var(--make-ai-surface, var(--make-color-bg-subtle, #f7f8fb));
-  --make-ai-internal-surface-strong: var(--make-ai-surface-strong, var(--make-color-bg-muted, #f0f2f7));
-  --make-ai-internal-text: var(--make-ai-text, var(--make-color-text, #1f2430));
-  --make-ai-internal-text-secondary: var(--make-ai-text-secondary, var(--make-color-text-secondary, #687080));
-  --make-ai-internal-border: var(--make-ai-border, var(--make-color-border, #e5e8ef));
+  --make-ai-internal-accent-soft: var(--make-ai-accent-soft, color-mix(in srgb, var(--make-ai-internal-accent) 10%, var(--make-ai-internal-bg)));
+  --make-ai-internal-bg: var(--make-ai-bg, var(--make-color-bg, #fcfcff));
+  --make-ai-internal-surface: var(--make-ai-surface, var(--make-color-bg-subtle, #f8f8fc));
+  --make-ai-internal-surface-strong: var(--make-ai-surface-strong, var(--make-color-bg-muted, #f0f0f6));
+  --make-ai-internal-text: var(--make-ai-text, var(--make-color-text, #252631));
+  --make-ai-internal-text-secondary: var(--make-ai-text-secondary, var(--make-color-text-secondary, #666979));
+  --make-ai-internal-border: var(--make-ai-border, var(--make-color-border, #e4e5ed));
   --make-ai-internal-success: var(--make-ai-success, var(--make-color-success, #1a9a61));
   --make-ai-internal-warning: var(--make-ai-warning, var(--make-color-warning, #c77b00));
   --make-ai-internal-danger: var(--make-ai-danger, var(--make-color-danger, #d04444));
   --make-ai-internal-radius: var(--make-ai-radius, var(--make-radius-large, 14px));
-  --make-ai-internal-shadow: var(--make-ai-shadow, 0 18px 52px rgb(23 26 38 / 16%));
-  --make-ai-internal-drawer-width: var(--make-ai-drawer-width, 408px);
+  --make-ai-internal-shadow: var(--make-ai-shadow, 0 18px 48px rgb(30 31 43 / 12%));
+  --make-ai-internal-drawer-width: var(--make-ai-drawer-width, 432px);
   --make-ai-internal-z-index: var(--make-ai-z-index, 1050);
 }
 
@@ -33,7 +33,7 @@
 
 .make-ai-assistant {
   color: var(--make-ai-internal-text);
-  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family: inherit;
 }
 
 .make-ai-assistant button,
@@ -47,27 +47,27 @@
 
 .make-ai-assistant__launcher {
   align-items: center;
-  background: linear-gradient(145deg, color-mix(in srgb, var(--make-ai-internal-accent) 82%, #9f91ff), var(--make-ai-internal-accent));
-  border: 0;
+  background: var(--make-ai-internal-accent);
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 70%, var(--make-ai-internal-border));
   border-radius: 50%;
   bottom: 28px;
-  box-shadow: 0 10px 30px color-mix(in srgb, var(--make-ai-internal-accent) 32%, transparent);
-  color: white;
+  box-shadow: 0 10px 24px color-mix(in srgb, var(--make-ai-internal-accent) 22%, transparent);
+  color: #fcfcff;
   cursor: pointer;
   display: flex;
-  height: 54px;
+  height: 50px;
   justify-content: center;
   padding: 0;
   position: fixed;
   right: 28px;
   transition: box-shadow 180ms ease, transform 180ms ease;
-  width: 54px;
+  width: 50px;
   z-index: calc(var(--make-ai-internal-z-index) + 2);
 }
 
 .make-ai-assistant__launcher:hover {
-  box-shadow: 0 14px 36px color-mix(in srgb, var(--make-ai-internal-accent) 42%, transparent);
-  transform: translateY(-2px) scale(1.03);
+  box-shadow: 0 12px 28px color-mix(in srgb, var(--make-ai-internal-accent) 28%, transparent);
+  transform: translateY(-2px);
 }
 
 .make-ai-assistant__launcher:focus-visible,
@@ -89,11 +89,10 @@
 }
 
 .make-ai-assistant__launcher-orbit {
-  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 46%, transparent);
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 30%, transparent);
   border-radius: 50%;
-  inset: -7px;
+  inset: -5px;
   position: absolute;
-  animation: make-ai-pulse 2.2s ease-out infinite;
 }
 
 .make-ai-assistant__drawer {
@@ -107,11 +106,12 @@
   top: 0;
   width: min(var(--make-ai-internal-drawer-width), 100vw);
   z-index: var(--make-ai-internal-z-index);
-  animation: make-ai-drawer-in 220ms cubic-bezier(.2, .75, .35, 1);
+  animation: make-ai-drawer-in 180ms cubic-bezier(.2, .75, .35, 1);
 }
 
 .make-ai-assistant__panel {
   background: var(--make-ai-internal-bg);
+  container-type: inline-size;
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr) auto;
   height: 100%;
@@ -124,8 +124,8 @@
   display: grid;
   gap: 10px;
   grid-template-columns: auto 1fr auto;
-  min-height: 72px;
-  padding: 14px 16px;
+  min-height: 70px;
+  padding: 14px 18px;
 }
 
 .make-ai-assistant__header h2,
@@ -136,33 +136,24 @@
 }
 
 .make-ai-assistant__header h2 {
-  font-size: 16px;
-  font-weight: 650;
+  font-size: 15px;
+  font-weight: 700;
   letter-spacing: -.01em;
   line-height: 22px;
 }
 
 .make-ai-assistant__header p {
-  align-items: center;
   color: var(--make-ai-internal-text-secondary);
-  display: flex;
   font-size: 12px;
-  gap: 6px;
-  margin-top: 2px;
-}
-
-.make-ai-assistant__online-dot {
-  background: var(--make-ai-internal-success);
-  border-radius: 50%;
-  height: 6px;
-  width: 6px;
+  line-height: 18px;
+  margin-top: 1px;
 }
 
 .make-ai-assistant__avatar {
   align-items: center;
   background: var(--make-ai-internal-accent-soft);
   border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 12%, transparent);
-  border-radius: 11px;
+  border-radius: 10px;
   color: var(--make-ai-internal-accent);
   display: inline-flex;
   flex: 0 0 auto;
@@ -209,21 +200,23 @@
 
 .make-ai-assistant__privacy-note {
   align-items: center;
-  background: var(--make-ai-internal-accent-soft);
-  color: color-mix(in srgb, var(--make-ai-internal-accent) 76%, var(--make-ai-internal-text));
+  background: var(--make-ai-internal-surface);
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-border) 84%, transparent);
+  color: var(--make-ai-internal-text-secondary);
   display: flex;
   font-size: 12px;
   gap: 8px;
-  margin: 12px 14px 0;
+  line-height: 1.5;
+  margin: 12px 18px 0;
   padding: 8px 10px;
-  border-radius: 8px;
+  border-radius: 10px;
 }
 
 .make-ai-assistant__body {
   min-height: 0;
   overflow: auto;
   overscroll-behavior: contain;
-  padding: 18px 14px 28px;
+  padding: 22px 18px 30px;
 }
 
 .make-ai-assistant__empty {
@@ -258,51 +251,119 @@
 }
 
 .make-ai-assistant__message {
-  align-items: flex-start;
-  display: flex;
-  gap: 9px;
-  margin-bottom: 22px;
+  display: block;
+  margin-bottom: 24px;
 }
 
 .make-ai-assistant__message--user {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.make-ai-assistant__message-turn {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.make-ai-assistant__message--assistant .make-ai-assistant__message-turn {
+  max-width: 100%;
+}
+
+.make-ai-assistant__message--user .make-ai-assistant__message-turn {
+  align-items: flex-end;
+  max-width: min(82%, 330px);
+}
+
+.make-ai-assistant__message-identity {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  min-height: 26px;
+}
+
+.make-ai-assistant__message--user .make-ai-assistant__message-identity {
   justify-content: flex-end;
 }
 
 .make-ai-assistant__message-stack {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  max-width: calc(100% - 45px);
+  gap: 8px;
   min-width: 0;
 }
 
+.make-ai-assistant__message--assistant .make-ai-assistant__message-stack {
+  margin-left: 34px;
+  max-width: calc(100% - 34px);
+}
+
 .make-ai-assistant__message--user .make-ai-assistant__message-stack {
   align-items: flex-end;
+  margin-top: 5px;
+  width: 100%;
+}
+
+.make-ai-assistant__message-sender {
+  color: var(--make-ai-internal-text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+}
+
+.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));
+}
+
+.make-ai-assistant__avatar--message,
+.make-ai-assistant__user-avatar {
+  border-radius: 8px;
+  height: 26px;
+  width: 26px;
+}
+
+.make-ai-assistant__avatar--message svg {
+  height: 15px;
+  width: 15px;
+}
+
+.make-ai-assistant__user-avatar {
+  background: var(--make-ai-internal-surface-strong);
+  border: 1px solid var(--make-ai-internal-border);
+  display: inline-flex;
+  flex: 0 0 auto;
+  overflow: hidden;
+}
+
+.make-ai-assistant__user-avatar img {
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
 }
 
 .make-ai-assistant__bubble {
-  background: var(--make-ai-internal-surface);
-  border-radius: 4px 14px 14px;
+  color: var(--make-ai-internal-text);
   font-size: 14px;
-  line-height: 1.65;
-  padding: 10px 12px;
+  line-height: 1.7;
   white-space: pre-wrap;
 }
 
 .make-ai-assistant__message--user .make-ai-assistant__bubble {
-  background: var(--make-ai-internal-accent-soft);
-  border-radius: 14px 4px 14px 14px;
+  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));
+  border-radius: 16px 5px 16px 16px;
   color: color-mix(in srgb, var(--make-ai-internal-accent) 68%, var(--make-ai-internal-text));
+  padding: 10px 13px;
 }
 
 .make-ai-assistant__typing {
   align-items: center;
   background: var(--make-ai-internal-surface);
-  border-radius: 4px 14px 14px;
+  border-radius: 10px;
   display: flex;
   gap: 4px;
-  height: 38px;
-  padding: 0 13px;
+  height: 34px;
+  padding: 0 12px;
 }
 
 .make-ai-assistant__typing span {
@@ -317,26 +378,30 @@
 .make-ai-assistant__typing span:nth-child(2) { animation-delay: 140ms; }
 .make-ai-assistant__typing span:nth-child(3) { animation-delay: 280ms; }
 
-.make-ai-assistant__error {
-  background: color-mix(in srgb, var(--make-ai-internal-danger) 8%, white);
-  border: 1px solid color-mix(in srgb, var(--make-ai-internal-danger) 20%, transparent);
+.make-ai-assistant__message-status {
   border-radius: 10px;
-  color: var(--make-ai-internal-danger);
   display: flex;
   flex-direction: column;
   font-size: 13px;
-  gap: 3px;
-  margin-left: 45px;
+  gap: 4px;
+  line-height: 1.55;
   padding: 10px 12px;
 }
 
+.make-ai-assistant__message-status--error {
+  background: color-mix(in srgb, var(--make-ai-internal-danger) 7%, var(--make-ai-internal-surface));
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-danger) 22%, var(--make-ai-internal-border));
+  color: var(--make-ai-internal-danger);
+}
+
 .make-ai-assistant__progress {
   align-items: center;
   color: var(--make-ai-internal-text-secondary);
   display: flex;
   font-size: 12px;
   gap: 7px;
-  margin-left: 45px;
+  line-height: 18px;
+  min-height: 24px;
 }
 
 .make-ai-assistant__progress > span {
@@ -348,26 +413,28 @@
 }
 
 .make-ai-assistant__retry {
-  background: var(--make-ai-internal-accent);
-  border: 0;
-  border-radius: 8px;
-  color: white;
+  align-self: flex-start;
+  background: transparent;
+  border: 1px solid currentColor;
+  border-radius: 7px;
+  color: inherit;
   cursor: pointer;
   font-size: 12px;
-  margin-top: 4px;
-  padding: 7px 12px;
+  font-weight: 600;
+  margin-top: 3px;
+  padding: 5px 9px;
 }
 
 .make-ai-assistant__composer-region {
   background: var(--make-ai-internal-bg);
   border-top: 1px solid var(--make-ai-internal-border);
-  padding: 10px 14px 8px;
+  padding: 12px 18px 10px;
 }
 
 .make-ai-assistant__suggestions {
   display: flex;
-  gap: 7px;
-  margin-bottom: 9px;
+  gap: 8px;
+  margin-bottom: 10px;
   overflow: auto;
   scrollbar-width: none;
 }
@@ -375,12 +442,12 @@
 .make-ai-assistant__suggestions button {
   background: var(--make-ai-internal-surface);
   border: 1px solid var(--make-ai-internal-border);
-  border-radius: 999px;
+  border-radius: 8px;
   color: var(--make-ai-internal-text-secondary);
   cursor: pointer;
   flex: 0 0 auto;
   font-size: 12px;
-  padding: 6px 10px;
+  padding: 7px 10px;
 }
 
 .make-ai-assistant__suggestions button:hover {
@@ -392,10 +459,10 @@
   align-items: flex-end;
   background: var(--make-ai-internal-bg);
   border: 1px solid var(--make-ai-internal-border);
-  border-radius: 12px;
+  border-radius: 16px;
   display: flex;
   gap: 8px;
-  padding: 9px 9px 9px 12px;
+  padding: 10px 10px 10px 13px;
   transition: border-color 160ms ease, box-shadow 160ms ease;
 }
 
@@ -408,9 +475,9 @@
   background: transparent;
   border: 0;
   color: var(--make-ai-internal-text);
-  line-height: 1.5;
-  max-height: 116px;
-  min-height: 42px;
+  line-height: 1.55;
+  max-height: 120px;
+  min-height: 46px;
   outline: 0;
   padding: 1px 0;
   resize: none;
@@ -418,21 +485,21 @@
 }
 
 .make-ai-assistant__composer textarea::placeholder {
-  color: color-mix(in srgb, var(--make-ai-internal-text-secondary) 75%, white);
+  color: color-mix(in srgb, var(--make-ai-internal-text-secondary) 75%, var(--make-ai-internal-bg));
 }
 
 .make-ai-assistant__send {
   align-items: center;
   background: var(--make-ai-internal-accent);
   border: 0;
-  border-radius: 9px;
-  color: white;
+  border-radius: 50%;
+  color: #fcfcff;
   cursor: pointer;
   display: flex;
   flex: 0 0 auto;
-  height: 34px;
+  height: 36px;
   justify-content: center;
-  width: 34px;
+  width: 36px;
 }
 
 .make-ai-assistant__send:hover:not(:disabled) { background: var(--make-ai-internal-accent-strong); }
@@ -448,7 +515,8 @@
 .make-ai-assistant__composer-region > p {
   color: var(--make-ai-internal-text-secondary);
   font-size: 10px;
-  margin: 7px 0 0;
+  line-height: 1.45;
+  margin: 8px 0 0;
   text-align: center;
 }
 
@@ -536,7 +604,7 @@
 
 .make-ai-artifact__action--primary {
   background: var(--make-ai-internal-accent);
-  color: white;
+  color: #fcfcff;
 }
 
 .make-ai-artifact__action--secondary {
@@ -567,7 +635,7 @@
 .make-ai-artifact__trend-label { color: var(--make-ai-internal-text-secondary); font-size: 11px; margin-bottom: 8px; }
 .make-ai-artifact__trend-bars { align-items: flex-end; display: flex; gap: 5px; height: 112px; }
 .make-ai-artifact__trend-point { align-items: center; display: flex; flex: 1; flex-direction: column; height: 100%; justify-content: flex-end; min-width: 0; }
-.make-ai-artifact__trend-bar { background: linear-gradient(to top, var(--make-ai-internal-accent), color-mix(in srgb, var(--make-ai-internal-accent) 42%, white)); border-radius: 4px 4px 1px 1px; min-height: 4px; width: min(18px, 70%); }
+.make-ai-artifact__trend-bar { background: var(--make-ai-internal-accent); border-radius: 4px 4px 1px 1px; min-height: 4px; width: min(18px, 70%); }
 .make-ai-artifact__trend-point small { color: var(--make-ai-internal-text-secondary); font-size: 9px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; text-align: center; }
 
 .make-ai-artifact__ranking { list-style: none; margin: 12px 0 0; padding: 0; }

package/package.ai.json

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

package/package.json

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