@fluencypassdevs/cycle 1.7.0 → 1.9.0

package/bin/mcp.mjs

@@ -408,6 +408,76 @@ const COMPONENTS = [
     example: `<ChatPanel messages={messages} onSend={handleSend} currentUser="aluno@email.com" />`,
     keywords: ["chat", "painel", "conversa", "mensagens", "live", "tempo real"],
   },
+  {
+    name: "ChatMessage",
+    import: `import { ChatMessage } from "@fluencypassdevs/cycle"`,
+    description: "Mensagem de conversa com IA. Persona ai/user/system, suporta texto + audio inline + like/dislike. Loading state com typing indicator. AI usa icone Ai + bubble transparente. User usa bubble pink coral (theme-brand) + avatar.",
+    props: [
+      { name: "persona", type: '"ai" | "user" | "system"', default: "-" },
+      { name: "text", type: "string", default: "-" },
+      { name: "audioSrc", type: "string", default: "-" },
+      { name: "avatar", type: "string", default: "-" },
+      { name: "author", type: "string", default: "-" },
+      { name: "showFeedback", type: "boolean", default: "false" },
+      { name: "feedbackValue", type: '"like" | "dislike" | null', default: "-" },
+      { name: "onFeedbackChange", type: "(val) => void", default: "-" },
+      { name: "loading", type: "boolean", default: "false" },
+    ],
+    example: `<ChatMessage persona="ai" text="Como posso ajudar?" />
+<ChatMessage persona="ai" text="Vou responder..." audioSrc="/audio.mp3" showFeedback />
+<ChatMessage persona="user" text="Oi" avatar="/me.jpg" author="Felipe" />
+<ChatMessage persona="ai" loading />
+<ChatMessage persona="system" text="Conversa iniciada" />`,
+    keywords: ["chat", "ai", "ia", "mensagem", "conversa", "message", "assistant", "bot"],
+  },
+  {
+    name: "MessageRating",
+    import: `import { MessageRating } from "@fluencypassdevs/cycle"`,
+    description: "Rating de 5 niveis com emoji usado ao final de uma conversa. Niveis: Disappointing/Frustrating/Ok/Helpful/Loved it. Layout horizontal (desktop) ou vertical (mobile). Labels customizaveis para i18n.",
+    props: [
+      { name: "value", type: "1 | 2 | 3 | 4 | 5 | null", default: "-" },
+      { name: "defaultValue", type: "1 | 2 | 3 | 4 | 5 | null", default: "-" },
+      { name: "onChange", type: "(val) => void", default: "-" },
+      { name: "layout", type: '"horizontal" | "vertical" | "auto"', default: '"auto"' },
+      { name: "labels", type: "Partial<MessageRatingLabels>", default: "-" },
+      { name: "disabled", type: "boolean", default: "false" },
+      { name: "title", type: "string", default: "-" },
+    ],
+    example: `<MessageRating onChange={(v) => save(v)} title="Como foi sua experiencia?" />
+<MessageRating value={3} disabled />`,
+    keywords: ["rating", "emoji", "avaliacao", "feedback", "experiencia", "score", "satisfacao"],
+  },
+  {
+    name: "MessageBar",
+    import: `import { MessageBar } from "@fluencypassdevs/cycle"`,
+    description: "Input bar para chat com IA. 6 estados: default, audio-only, active, disabled, recording, paused. UI-only: consumer implementa MediaRecorder + HTMLAudioElement via callbacks. Live waveform real durante recording (Web Audio API, rolling window estilo WhatsApp). RecordedWaveform real durante paused com peaks + barras tocadas/nao-tocadas + dot verde + click/drag-to-seek. Press-to-record no mobile (touch-only): long-press inicia, drag-up trava em hands-free, drag-left cancela, release < 1s cancela, release >= 1s envia. Vibracao haptica em lock/cancel.",
+    props: [
+      { name: "state", type: '"default" | "audio-only" | "active" | "disabled" | "recording" | "paused"', default: '"default"' },
+      { name: "value", type: "string", default: '""' },
+      { name: "onChange", type: "(val) => void", default: "-" },
+      { name: "onSendText", type: "(text) => void", default: "-" },
+      { name: "onStartRecording", type: "() => void", default: "-" },
+      { name: "onPauseRecording", type: "() => void", default: "-" },
+      { name: "onResumeRecording", type: "() => void", default: "-" },
+      { name: "onCancelRecording", type: "() => void", default: "-" },
+      { name: "onSendAudio", type: "() => void", default: "-" },
+      { name: "onTogglePlay", type: "() => void", default: "-" },
+      { name: "recordingDuration", type: "number", default: "0" },
+      { name: "isPlaying", type: "boolean", default: "false" },
+      { name: "recordingStream", type: "MediaStream | null", default: "null", note: "passe o MESMO stream do MediaRecorder; o componente analisa em tempo real para renderizar o live waveform" },
+      { name: "playbackProgress", type: "number (0-1)", default: "0", note: "consumer atualiza via audio.ontimeupdate enquanto toca o preview no estado paused" },
+      { name: "onSeekPlayback", type: "(progress) => void", default: "-", note: "consumer seta audio.currentTime = progress * duration" },
+      { name: "placeholder", type: "string", default: '"Digite sua mensagem..."' },
+    ],
+    example: `// 1) Captura: passa o MESMO stream pro MessageBar (live waveform).
+// 2) Pause: recorder.stop() gera o Blob; crie um <audio> e atualize playbackProgress via ontimeupdate.
+// 3) Cleanup: revokeObjectURL ao cancelar/enviar.
+
+<MessageBar value={text} onChange={setText} onSendText={(t) => send(t)} onStartRecording={() => startRec()} />
+<MessageBar state="recording" recordingDuration={4} recordingStream={stream} onPauseRecording={pause} onCancelRecording={cancel} onSendAudio={send} />
+<MessageBar state="paused" recordingDuration={42} isPlaying={isPlaying} playbackProgress={progress} onTogglePlay={togglePlay} onSeekPlayback={seek} onResumeRecording={resume} onCancelRecording={cancel} onSendAudio={send} />`,
+    keywords: ["chat", "input", "message", "bar", "audio", "recording", "microphone", "mensagem", "envio", "press-to-record", "waveform", "playback", "whatsapp"],
+  },
   {
     name: "LikeDislike",
     import: `import { LikeDislike } from "@fluencypassdevs/cycle"`,

package/dist/chunk-37C2K2NM.js

@@ -0,0 +1,101 @@
+import { cn } from './chunk-TYCPXAXF.js';
+import { __objRest, __spreadValues, __spreadProps } from './chunk-YINJ5YZ5.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  1: { emoji: "\u{1F621}", title: "Disappointing", subtitle: "Decepcionante" },
+  2: { emoji: "\u{1F61E}", title: "Frustrating", subtitle: "Frustrante" },
+  3: { emoji: "\u{1F610}", title: "Ok", subtitle: "Tudo bem" },
+  4: { emoji: "\u{1F642}", title: "Helpful", subtitle: "Ajudou" },
+  5: { emoji: "\u{1F60D}", title: "Loved it", subtitle: "Amei" }
+};
+var VALUES = [1, 2, 3, 4, 5];
+function MessageRating(_a) {
+  var _b = _a, {
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    layout = "auto",
+    labels: labelOverrides,
+    disabled = false,
+    title,
+    className
+  } = _b, props = __objRest(_b, [
+    "value",
+    "defaultValue",
+    "onChange",
+    "layout",
+    "labels",
+    "disabled",
+    "title",
+    "className"
+  ]);
+  const [internalValue, setInternalValue] = React.useState(
+    defaultValue != null ? defaultValue : null
+  );
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const labels = React.useMemo(
+    () => __spreadValues(__spreadValues({}, DEFAULT_LABELS), labelOverrides),
+    [labelOverrides]
+  );
+  const handleSelect = (v) => {
+    if (disabled) return;
+    if (!isControlled) setInternalValue(v);
+    onChange == null ? void 0 : onChange(v);
+  };
+  const layoutClass = layout === "vertical" ? "flex-col" : "flex-row";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "message-rating",
+      role: "radiogroup",
+      "aria-label": title != null ? title : "Avalie sua experiencia",
+      className: cn("flex flex-col gap-3", className)
+    }, props), {
+      children: [
+        title && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: title }),
+        /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", layoutClass), children: VALUES.map((v) => {
+          const label = labels[v];
+          const selected = value === v;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": selected,
+              "aria-label": `${label.title} \u2014 ${label.subtitle}`,
+              disabled,
+              onClick: () => handleSelect(v),
+              className: cn(
+                /* Base — shared mobile/desktop */
+                "flex items-center transition-[color,background-color,border-color,box-shadow] outline-none",
+                "hover:opacity-90 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                /* Mobile: compacto, justa o emoji centralizado em pill cinza */
+                "rounded-xl px-3 py-2 justify-center",
+                /* Desktop: card completo com texto, flex-1, border */
+                "sm:flex-1 sm:gap-3 sm:px-3 sm:py-2.5 sm:text-left sm:justify-start sm:border",
+                /* Selected vs unselected (estados diferentes por breakpoint) */
+                selected ? "bg-accent theme-brand sm:border-primary sm:shadow-xs" : "bg-muted sm:bg-transparent sm:border-neutral-border"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-base sm:text-2xl leading-none shrink-0", "aria-hidden": "true", children: label.emoji }),
+                /* @__PURE__ */ jsxs("span", { className: "hidden sm:flex sm:flex-col min-w-0", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium leading-tight text-foreground truncate", children: label.title }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground leading-tight truncate", children: label.subtitle })
+                ] })
+              ]
+            },
+            v
+          );
+        }) })
+      ]
+    })
+  );
+}
+
+export { MessageRating };
+//# sourceMappingURL=chunk-37C2K2NM.js.map
+//# sourceMappingURL=chunk-37C2K2NM.js.map

package/dist/chunk-37C2K2NM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/message-rating.tsx"],"names":[],"mappings":"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","file":"chunk-37C2K2NM.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* ─── Types ───────────────────────────────────────────────────── */\n\nexport type MessageRatingValue = 1 | 2 | 3 | 4 | 5\n\nexport interface RatingLabel {\n  emoji: string\n  title: string\n  subtitle: string\n}\n\nexport type MessageRatingLabels = Record<MessageRatingValue, RatingLabel>\n\nexport interface MessageRatingProps extends Omit<React.ComponentProps<\"div\">, \"onChange\" | \"defaultValue\"> {\n  /** Valor selecionado (controlado) */\n  value?: MessageRatingValue | null\n  /** Valor inicial (nao controlado) */\n  defaultValue?: MessageRatingValue | null\n  /** Callback ao escolher uma opcao */\n  onChange?: (value: MessageRatingValue) => void\n  /** Layout. \"auto\" usa vertical (column) abaixo de sm e horizontal acima */\n  layout?: \"horizontal\" | \"vertical\" | \"auto\"\n  /** Labels customizadas (default: PT-BR) */\n  labels?: Partial<MessageRatingLabels>\n  /** Desabilita a interacao */\n  disabled?: boolean\n  /** Titulo opcional acima das opcoes */\n  title?: string\n}\n\n/* ─── Default labels (PT-BR) ──────────────────────────────────── */\n\nconst DEFAULT_LABELS: MessageRatingLabels = {\n  1: { emoji: \"😡\", title: \"Disappointing\", subtitle: \"Decepcionante\" },\n  2: { emoji: \"😞\", title: \"Frustrating\", subtitle: \"Frustrante\" },\n  3: { emoji: \"😐\", title: \"Ok\", subtitle: \"Tudo bem\" },\n  4: { emoji: \"🙂\", title: \"Helpful\", subtitle: \"Ajudou\" },\n  5: { emoji: \"😍\", title: \"Loved it\", subtitle: \"Amei\" },\n}\n\nconst VALUES: MessageRatingValue[] = [1, 2, 3, 4, 5]\n\n/* ─── Component ───────────────────────────────────────────────── */\n\nfunction MessageRating({\n  value: controlledValue,\n  defaultValue,\n  onChange,\n  layout = \"auto\",\n  labels: labelOverrides,\n  disabled = false,\n  title,\n  className,\n  ...props\n}: MessageRatingProps) {\n  const [internalValue, setInternalValue] = React.useState<MessageRatingValue | null>(\n    defaultValue ?? null\n  )\n  const isControlled = controlledValue !== undefined\n  const value = isControlled ? controlledValue : internalValue\n\n  const labels: MessageRatingLabels = React.useMemo(\n    () => ({ ...DEFAULT_LABELS, ...labelOverrides }),\n    [labelOverrides]\n  )\n\n  const handleSelect = (v: MessageRatingValue) => {\n    if (disabled) return\n    if (!isControlled) setInternalValue(v)\n    onChange?.(v)\n  }\n\n  /* Layout: vertical (column) sobrescreve so essa direcao. horizontal/auto\n     sao iguais agora (sempre flex-row, pois mobile e desktop diferem no\n     conteudo de cada botao, nao na direcao do container). */\n  const layoutClass = layout === \"vertical\" ? \"flex-col\" : \"flex-row\"\n\n  return (\n    <div\n      data-slot=\"message-rating\"\n      role=\"radiogroup\"\n      aria-label={title ?? \"Avalie sua experiencia\"}\n      className={cn(\"flex flex-col gap-3\", className)}\n      {...props}\n    >\n      {title && (\n        <p className=\"text-sm font-medium text-foreground\">{title}</p>\n      )}\n      <div className={cn(\"flex gap-2\", layoutClass)}>\n        {VALUES.map((v) => {\n          const label = labels[v]\n          const selected = value === v\n          return (\n            <button\n              key={v}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={selected}\n              aria-label={`${label.title} — ${label.subtitle}`}\n              disabled={disabled}\n              onClick={() => handleSelect(v)}\n              className={cn(\n                /* Base — shared mobile/desktop */\n                \"flex items-center transition-[color,background-color,border-color,box-shadow] outline-none\",\n                \"hover:opacity-90 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n                \"disabled:cursor-not-allowed disabled:opacity-50\",\n                /* Mobile: compacto, justa o emoji centralizado em pill cinza */\n                \"rounded-xl px-3 py-2 justify-center\",\n                /* Desktop: card completo com texto, flex-1, border */\n                \"sm:flex-1 sm:gap-3 sm:px-3 sm:py-2.5 sm:text-left sm:justify-start sm:border\",\n                /* Selected vs unselected (estados diferentes por breakpoint) */\n                selected\n                  ? \"bg-accent theme-brand sm:border-primary sm:shadow-xs\"\n                  : \"bg-muted sm:bg-transparent sm:border-neutral-border\"\n              )}\n            >\n              <span className=\"text-base sm:text-2xl leading-none shrink-0\" aria-hidden=\"true\">\n                {label.emoji}\n              </span>\n              {/* Labels: visiveis apenas no desktop */}\n              <span className=\"hidden sm:flex sm:flex-col min-w-0\">\n                <span className=\"text-sm font-medium leading-tight text-foreground truncate\">\n                  {label.title}\n                </span>\n                <span className=\"text-xs text-muted-foreground leading-tight truncate\">\n                  {label.subtitle}\n                </span>\n              </span>\n            </button>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport { MessageRating }\n"]}