react-optimistic-chat 1.0.0

package/dist/index.mjs

@@ -0,0 +1,658 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/components/indicators/LoadingSpinner.tsx
+import { jsx } from "react/jsx-runtime";
+function LoadingSpinner({ size }) {
+  const sizeMap = {
+    xs: 24,
+    sm: 32,
+    md: 48,
+    lg: 64
+  };
+  const px = sizeMap[size];
+  return /* @__PURE__ */ jsx("div", { className: "roc-spinner-wrapper", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "roc-spinner",
+      style: {
+        width: px,
+        height: px
+      }
+    }
+  ) });
+}
+
+// src/components/indicators/SendingDots.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function SendingDots({ size = "md" }) {
+  const sizeMap = {
+    xs: { wrapperWidth: 12, fontSize: 8 },
+    sm: { wrapperWidth: 16, fontSize: 10 },
+    md: { wrapperWidth: 20, fontSize: 12 },
+    lg: { wrapperWidth: 24, fontSize: 14 }
+  };
+  const { wrapperWidth, fontSize } = sizeMap[size];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "roc-sending-dots",
+      style: { width: wrapperWidth },
+      "aria-label": "sending",
+      children: [
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: "roc-sending-dot",
+            style: { fontSize, animationDelay: "0ms" },
+            children: "."
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: "roc-sending-dot",
+            style: { fontSize, animationDelay: "200ms" },
+            children: "."
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: "roc-sending-dot",
+            style: { fontSize, animationDelay: "400ms" },
+            children: "."
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ChatMessage.tsx
+import "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChatMessage({
+  id,
+  role,
+  content,
+  isLoading = false,
+  wrapperClassName = "",
+  icon,
+  aiIconWrapperClassName = "",
+  aiIconColor = "",
+  bubbleClassName = "",
+  aiBubbleClassName = "",
+  userBubbleClassName = "",
+  position = "auto",
+  loadingRenderer
+}) {
+  const isAI = role === "AI";
+  const justify = position === "auto" ? isAI ? "justify-start" : "justify-end" : position === "left" ? "justify-start" : "justify-end";
+  const defaultAIIcon = /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      className: `${aiIconColor}`,
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx3("path", { d: "M12 8V4H8" }),
+        /* @__PURE__ */ jsx3("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
+        /* @__PURE__ */ jsx3("path", { d: "M2 14h2" }),
+        /* @__PURE__ */ jsx3("path", { d: "M20 14h2" }),
+        /* @__PURE__ */ jsx3("path", { d: "M15 13v2" }),
+        /* @__PURE__ */ jsx3("path", { d: "M9 13v2" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs2("div", { className: `flex mb-4 items-start ${justify} ${wrapperClassName}`, children: [
+    isAI && /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: `
+            mr-2 bg-gray-100 rounded-full p-2 border-2 border-black
+            ${aiIconWrapperClassName}
+          `,
+        children: icon || defaultAIIcon
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: `
+          py-3 px-3 max-h-96 overflow-y-auto w-fit max-w-[calc(100%-3rem)]
+          whitespace-pre-wrap break-words text-sm
+          ${isAI ? `bg-gray-100 border-gray-200 rounded-b-xl rounded-t-xl ${aiBubbleClassName}` : `bg-white border border-gray-200 rounded-b-xl rounded-tl-xl ${userBubbleClassName}`}
+          ${bubbleClassName}
+        `,
+        children: isLoading ? loadingRenderer != null ? loadingRenderer : /* @__PURE__ */ jsx3(LoadingSpinner, { size: "xs" }) : content
+      }
+    )
+  ] }, id);
+}
+
+// src/components/ChatList.tsx
+import React2 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ChatList({
+  messages,
+  messageMapper,
+  messageRenderer,
+  className,
+  loadingRenderer
+}) {
+  const mappedMessages = messageMapper ? messages.map(messageMapper) : messages;
+  return /* @__PURE__ */ jsx4("div", { className: `flex flex-col ${className}`, children: mappedMessages.map((msg) => {
+    if (messageRenderer) {
+      return /* @__PURE__ */ jsx4(React2.Fragment, { children: messageRenderer(msg) }, msg.id);
+    }
+    return /* @__PURE__ */ jsx4(
+      ChatMessage,
+      __spreadProps(__spreadValues({}, msg), {
+        loadingRenderer
+      }),
+      msg.id
+    );
+  }) });
+}
+
+// src/components/ChatInput.tsx
+import { useState, useRef, useEffect } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function ChatInput({
+  onSend,
+  disableVoice = false,
+  placeholder = "\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD558\uC138\uC694...",
+  className = "",
+  inputClassName = "",
+  micButton,
+  recordingButton,
+  sendButton,
+  sendingButton,
+  maxHeight = 150,
+  value,
+  onChange,
+  isSending,
+  submitOnEnter = false,
+  speechLang = "ko-KR"
+}) {
+  const [innerText, setInnerText] = useState("");
+  const [isRecording, setIsRecording] = useState(false);
+  const textareaRef = useRef(null);
+  const isControlled = value !== void 0;
+  const text = isControlled ? value : innerText;
+  const isEmpty = text.trim().length === 0;
+  const recognition = useRef(null);
+  const isVoiceMode = !disableVoice && !isSending && (isEmpty || isRecording);
+  useEffect(() => {
+    return () => {
+      const r = recognition.current;
+      if (r) {
+        r.onresult = null;
+        r.onstart = null;
+        r.onend = null;
+        try {
+          r.stop();
+        } catch (e) {
+          console.warn("SpeechRecognition stop error:", e);
+        }
+      }
+      recognition.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    const newHeight = Math.min(el.scrollHeight, maxHeight);
+    el.style.height = `${newHeight}px`;
+    el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
+  }, [text, maxHeight]);
+  const handleChange = (e) => {
+    const next = e.target.value;
+    if (!isControlled) {
+      setInnerText(next);
+    }
+    onChange == null ? void 0 : onChange(next);
+  };
+  const handleSend = async () => {
+    if (isVoiceMode || isEmpty || isSending) return;
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    try {
+      if (!isControlled)
+        setInnerText("");
+      await onSend(trimmed);
+    } catch (error) {
+      console.error("ChatInput.handleSend.error: ", error);
+    }
+  };
+  const handleKeyDown = async (e) => {
+    if (!submitOnEnter) return;
+    if (e.key === "Enter" && e.shiftKey) return;
+    if (e.key === "Enter") {
+      e.preventDefault();
+      await handleSend();
+    }
+  };
+  const handleRecord = () => {
+    var _a, _b;
+    try {
+      if (!isRecording) {
+        const Speech = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (!Speech) {
+          console.error("Browser does not support SpeechRecognition");
+          alert("\uD604\uC7AC \uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C\uB294 \uC74C\uC131 \uC778\uC2DD \uAE30\uB2A5\uC744 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
+          return;
+        }
+        recognition.current = new Speech();
+        recognition.current.lang = speechLang;
+        recognition.current.continuous = true;
+        recognition.current.interimResults = true;
+        recognition.current.onstart = () => {
+          setIsRecording(true);
+        };
+        recognition.current.onend = () => {
+          setIsRecording(false);
+        };
+        recognition.current.onresult = (event) => {
+          const newTranscript = Array.from(event.results).map((r) => {
+            var _a2;
+            return (_a2 = r[0]) == null ? void 0 : _a2.transcript;
+          }).join("");
+          setInnerText(newTranscript);
+        };
+        (_a = recognition.current) == null ? void 0 : _a.start();
+      } else {
+        (_b = recognition.current) == null ? void 0 : _b.stop();
+      }
+    } catch (e) {
+      console.error("Speech Recognition error: ", e);
+      alert("\uC74C\uC131 \uC785\uB825\uC744 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. \uD14D\uC2A4\uD2B8\uB85C \uC785\uB825\uD574\uC8FC\uC138\uC694.");
+      setIsRecording(false);
+    }
+  };
+  const getActivityLayer = () => {
+    if (isSending) return "sending";
+    if (!disableVoice) {
+      if (isRecording) return "recording";
+      if (isVoiceMode) return "mic";
+      return "send";
+    }
+    if (disableVoice) {
+      if (!isEmpty) return "send";
+      return null;
+    }
+    return null;
+  };
+  const activeLayer = getActivityLayer();
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `
+        flex border border-gray-300 p-2 rounded-3xl
+        ${className}
+      `,
+      children: [
+        /* @__PURE__ */ jsx5(
+          "textarea",
+          {
+            ref: textareaRef,
+            value: text,
+            onChange: handleChange,
+            placeholder,
+            rows: 1,
+            onKeyDown: handleKeyDown,
+            className: `
+          w-full px-3 py-2
+          resize-none border-none
+          text-sm focus:outline-none
+          overflow-hidden chatinput-scroll
+          ${inputClassName}
+        `
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            type: "button",
+            disabled: isSending,
+            onClick: activeLayer === "mic" || activeLayer === "recording" ? handleRecord : handleSend,
+            className: "relative w-10 h-10 ml-2 mt-auto flex-shrink-0",
+            children: [
+              /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  className: `
+            absolute inset-0 flex items-center justify-center rounded-3xl
+            transition-opacity duration-150
+            ${activeLayer === "mic" ? "opacity-100" : "opacity-0"}
+            bg-gray-100 text-gray-700
+            ${(micButton == null ? void 0 : micButton.className) || ""}
+          `,
+                  children: (micButton == null ? void 0 : micButton.icon) || /* @__PURE__ */ jsxs3("svg", { width: "24", height: "24", stroke: "currentColor", fill: "none", strokeWidth: "2", children: [
+                    /* @__PURE__ */ jsx5("path", { d: "M12 19v3" }),
+                    /* @__PURE__ */ jsx5("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+                    /* @__PURE__ */ jsx5("rect", { x: "9", y: "2", width: "6", height: "13", rx: "3" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  className: `
+            absolute inset-0 flex items-center justify-center rounded-3xl
+            transition-opacity duration-150
+            ${activeLayer === "recording" ? "opacity-100" : "opacity-0"}
+            bg-red-600 text-white
+            ${(recordingButton == null ? void 0 : recordingButton.className) || ""}
+          `,
+                  children: (recordingButton == null ? void 0 : recordingButton.icon) || /* @__PURE__ */ jsxs3("svg", { width: "24", height: "24", stroke: "currentColor", fill: "none", strokeWidth: "2", children: [
+                    /* @__PURE__ */ jsx5("path", { d: "M12 19v3" }),
+                    /* @__PURE__ */ jsx5("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+                    /* @__PURE__ */ jsx5("rect", { x: "9", y: "2", width: "6", height: "13", rx: "3" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  className: `
+            absolute inset-0 flex items-center justify-center rounded-3xl
+            transition-opacity duration-150
+            ${activeLayer === "send" ? "opacity-100" : "opacity-0"}
+            bg-black text-white
+            ${(sendButton == null ? void 0 : sendButton.className) || ""}
+          `,
+                  children: (sendButton == null ? void 0 : sendButton.icon) || /* @__PURE__ */ jsxs3(
+                    "svg",
+                    {
+                      width: "20",
+                      height: "20",
+                      viewBox: "0 0 22 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      "stroke-width": "2",
+                      children: [
+                        /* @__PURE__ */ jsx5("path", { d: "M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z" }),
+                        /* @__PURE__ */ jsx5("path", { d: "M6 12h16" })
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  className: `
+            absolute inset-0 flex items-center justify-center rounded-3xl
+            transition-opacity duration-150
+            ${activeLayer === "sending" ? "opacity-100" : "opacity-0"}
+            bg-gray-400 text-white
+            ${(sendingButton == null ? void 0 : sendingButton.className) || ""}
+          `,
+                  children: (sendingButton == null ? void 0 : sendingButton.icon) || /* @__PURE__ */ jsxs3(
+                    "svg",
+                    {
+                      width: "20",
+                      height: "20",
+                      viewBox: "0 0 22 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      "stroke-width": "2",
+                      children: [
+                        /* @__PURE__ */ jsx5("path", { d: "M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z" }),
+                        /* @__PURE__ */ jsx5("path", { d: "M6 12h16" })
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ChatContainer.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function ChatContainer({
+  messages,
+  messageMapper,
+  messageRenderer,
+  loadingRenderer,
+  listClassName,
+  onSend,
+  isSending,
+  disableVoice,
+  placeholder,
+  inputClassName,
+  className
+}) {
+  const [isAtBottom, setIsAtBottom] = useState2(true);
+  const scrollRef = useRef2(null);
+  useEffect2(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+    const handleScroll = () => {
+      const isBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 10;
+      setIsAtBottom(isBottom);
+    };
+    el.addEventListener("scroll", handleScroll);
+    return () => el.removeEventListener("scroll", handleScroll);
+  }, []);
+  useEffect2(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    if (isAtBottom) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [messages, isAtBottom]);
+  const scrollToBottom = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+    setIsAtBottom(true);
+  };
+  const handleSend = async (value) => {
+    setIsAtBottom(true);
+    requestAnimationFrame(() => {
+      scrollToBottom();
+    });
+    await onSend(value);
+  };
+  return /* @__PURE__ */ jsx6(Fragment, { children: /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: `
+          flex flex-col ${className || ""}
+        `,
+      children: [
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            ref: scrollRef,
+            className: `flex-1 overflow-y-auto chatContainer-scroll p-2`,
+            children: /* @__PURE__ */ jsx6(
+              ChatList,
+              __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+                messages
+              }, messageMapper && { messageMapper }), messageRenderer && { messageRenderer }), loadingRenderer && { loadingRenderer }), listClassName && { className: listClassName })
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs4("div", { className: "flex-shrink-0 relative", children: [
+          !isAtBottom && /* @__PURE__ */ jsx6(
+            "button",
+            {
+              onClick: scrollToBottom,
+              className: "\r\n                absolute bottom-20 left-1/2 -translate-x-1/2\r\n                w-10 h-10 rounded-full bg-white font-bold\r\n                flex items-center justify-center\r\n                border-gray-200 border-[1px]\r\n              ",
+              "aria-label": "scroll to bottom",
+              children: /* @__PURE__ */ jsxs4(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "24",
+                  height: "24",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ jsx6("path", { d: "M12 5v14" }),
+                    /* @__PURE__ */ jsx6("path", { d: "m19 12-7 7-7-7" })
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            ChatInput,
+            __spreadValues(__spreadValues(__spreadValues({
+              onSend: handleSend,
+              isSending
+            }, disableVoice && { disableVoice }), placeholder && { placeholder }), inputClassName && { className: inputClassName })
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/hooks/useOptimisticChat.ts
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useState as useState3 } from "react";
+function useOptimisticChat({
+  queryKey,
+  queryFn,
+  mutationFn,
+  map,
+  onError,
+  staleTime = 0,
+  gcTime = 0
+}) {
+  const [isPending, setIsPending] = useState3(false);
+  const queryClient = useQueryClient();
+  const {
+    data: messages = [],
+    isLoading: isInitialLoading
+  } = useQuery({
+    queryKey,
+    queryFn: async () => {
+      const rawList = await queryFn();
+      return rawList.map(map);
+    },
+    staleTime,
+    gcTime
+  });
+  const mutation = useMutation({
+    mutationFn,
+    // (content: string) => Promise<TMutationRaw>
+    onMutate: async (content) => {
+      setIsPending(true);
+      const prev = queryClient.getQueryData(queryKey);
+      if (prev) {
+        await queryClient.cancelQueries({ queryKey });
+      }
+      queryClient.setQueryData(queryKey, (old) => {
+        const base = old != null ? old : [];
+        return [
+          ...base,
+          // user 메시지 추가
+          {
+            id: crypto.randomUUID(),
+            role: "USER",
+            content
+          },
+          // AI placeholder 추가
+          {
+            id: crypto.randomUUID(),
+            role: "AI",
+            content: "",
+            isLoading: true
+          }
+        ];
+      });
+      return { prev };
+    },
+    onSuccess: (rawAiResponse) => {
+      const aiMessage = map(rawAiResponse);
+      queryClient.setQueryData(queryKey, (old) => {
+        if (!old || old.length === 0) {
+          return [aiMessage];
+        }
+        const next = [...old];
+        const lastIndex = next.length - 1;
+        next[lastIndex] = __spreadProps(__spreadValues(__spreadValues({}, next[lastIndex]), aiMessage), {
+          isLoading: false
+        });
+        return next;
+      });
+      setIsPending(false);
+    },
+    onError: (error, _variables, context) => {
+      setIsPending(false);
+      if (context == null ? void 0 : context.prev) {
+        queryClient.setQueryData(queryKey, context.prev);
+      }
+      onError == null ? void 0 : onError(error);
+    },
+    // mutation 이후 서버 기준 최신 데이터 재동기화
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey });
+    }
+  });
+  const sendUserMessage = (content) => {
+    if (!content.trim()) return;
+    mutation.mutate(content);
+  };
+  return {
+    messages,
+    // Message[]
+    sendUserMessage,
+    // (content: string) => void
+    isPending,
+    // 사용자가 채팅 전송 후 AI 응답이 올 때까지의 로딩
+    isInitialLoading
+    // 초기 로딩 상태
+  };
+}
+export {
+  ChatContainer,
+  ChatInput,
+  ChatList,
+  ChatMessage,
+  LoadingSpinner,
+  SendingDots,
+  useOptimisticChat
+};

package/dist/style.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.mb-4{margin-bottom:1rem}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mt-auto{margin-top:auto}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-6{height:1.5rem}.h-8{height:2rem}.max-h-96{max-height:24rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.max-w-\[calc\(100\%-3rem\)\]{max-width:calc(100% - 3rem)}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.animate-\[chatinput-loading-bounce_1\.4s_ease-in-out_0\.2s_infinite\]{animation:chatinput-loading-bounce 1.4s ease-in-out .2s infinite}.animate-\[chatinput-loading-bounce_1\.4s_ease-in-out_0\.4s_infinite\]{animation:chatinput-loading-bounce 1.4s ease-in-out .4s infinite}.animate-\[chatinput-loading-bounce_1\.4s_ease-in-out_infinite\]{animation:chatinput-loading-bounce 1.4s ease-in-out infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.resize-none{resize:none}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-b-xl{border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem}.rounded-t-xl{border-top-right-radius:.75rem}.rounded-t-xl,.rounded-tl-xl{border-top-left-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-none{border-style:none}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-2{padding:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.text-\[10px\]{font-size:10px}.text-\[12px\]{font-size:12px}.text-\[14px\]{font-size:14px}.text-\[8px\]{font-size:8px}.text-sm{font-size:.875rem;line-height:1.25rem}.font-extrabold{font-weight:800}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-opacity{transition-duration:.15s}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.chatContainer-scroll::-webkit-scrollbar{width:6px}.chatContainer-scroll::-webkit-scrollbar-track{background:transparent}.chatContainer-scroll::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:10px}.chatContainer-scroll::-webkit-scrollbar-button{display:none}.chatinput-scroll::-webkit-scrollbar{width:6px}.chatinput-scroll::-webkit-scrollbar-track{background:transparent}.chatinput-scroll::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:10px}.chatinput-scroll::-webkit-scrollbar-button{display:none}.roc-spinner-wrapper{display:flex;align-items:center;justify-content:center}.roc-spinner{border:4px solid #e5e7eb;border-right-color:transparent;border-radius:50%;animation:roc-spin 1s linear infinite}@keyframes roc-spin{to{transform:rotate(1turn)}}.roc-sending-dots{display:inline-flex;justify-content:space-between;align-items:center}.roc-sending-dot{font-weight:800;line-height:1;animation:roc-sending-bounce 1.4s ease-in-out infinite}@keyframes roc-sending-bounce{0%,to{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}