react-optimistic-chat 1.0.0

package/dist/index.js

@@ -0,0 +1,698 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ChatContainer: () => ChatContainer,
+  ChatInput: () => ChatInput,
+  ChatList: () => ChatList,
+  ChatMessage: () => ChatMessage,
+  LoadingSpinner: () => LoadingSpinner,
+  SendingDots: () => SendingDots,
+  useOptimisticChat: () => useOptimisticChat
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/indicators/LoadingSpinner.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function LoadingSpinner({ size }) {
+  const sizeMap = {
+    xs: 24,
+    sm: 32,
+    md: 48,
+    lg: 64
+  };
+  const px = sizeMap[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "roc-spinner-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "roc-spinner",
+      style: {
+        width: px,
+        height: px
+      }
+    }
+  ) });
+}
+
+// src/components/indicators/SendingDots.tsx
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsxs)(
+    "span",
+    {
+      className: "roc-sending-dots",
+      style: { width: wrapperWidth },
+      "aria-label": "sending",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            className: "roc-sending-dot",
+            style: { fontSize, animationDelay: "0ms" },
+            children: "."
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            className: "roc-sending-dot",
+            style: { fontSize, animationDelay: "200ms" },
+            children: "."
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            className: "roc-sending-dot",
+            style: { fontSize, animationDelay: "400ms" },
+            children: "."
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ChatMessage.tsx
+var import_react = require("react");
+var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsxs)(
+    "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__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 8V4H8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2 14h2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 14h2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M15 13v2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 13v2" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `flex mb-4 items-start ${justify} ${wrapperClassName}`, children: [
+    isAI && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: `
+            mr-2 bg-gray-100 rounded-full p-2 border-2 border-black
+            ${aiIconWrapperClassName}
+          `,
+        children: icon || defaultAIIcon
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "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__ */ (0, import_jsx_runtime3.jsx)(LoadingSpinner, { size: "xs" }) : content
+      }
+    )
+  ] }, id);
+}
+
+// src/components/ChatList.tsx
+var import_react2 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ChatList({
+  messages,
+  messageMapper,
+  messageRenderer,
+  className,
+  loadingRenderer
+}) {
+  const mappedMessages = messageMapper ? messages.map(messageMapper) : messages;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `flex flex-col ${className}`, children: mappedMessages.map((msg) => {
+    if (messageRenderer) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react2.default.Fragment, { children: messageRenderer(msg) }, msg.id);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ChatMessage,
+      __spreadProps(__spreadValues({}, msg), {
+        loadingRenderer
+      }),
+      msg.id
+    );
+  }) });
+}
+
+// src/components/ChatInput.tsx
+var import_react3 = require("react");
+var import_jsx_runtime5 = require("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] = (0, import_react3.useState)("");
+  const [isRecording, setIsRecording] = (0, import_react3.useState)(false);
+  const textareaRef = (0, import_react3.useRef)(null);
+  const isControlled = value !== void 0;
+  const text = isControlled ? value : innerText;
+  const isEmpty = text.trim().length === 0;
+  const recognition = (0, import_react3.useRef)(null);
+  const isVoiceMode = !disableVoice && !isSending && (isEmpty || isRecording);
+  (0, import_react3.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;
+    };
+  }, []);
+  (0, import_react3.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__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: `
+        flex border border-gray-300 p-2 rounded-3xl
+        ${className}
+      `,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "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__ */ (0, import_jsx_runtime5.jsxs)(
+          "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__ */ (0, import_jsx_runtime5.jsx)(
+                "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__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "24", height: "24", stroke: "currentColor", fill: "none", strokeWidth: "2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 19v3" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: "9", y: "2", width: "6", height: "13", rx: "3" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "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__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "24", height: "24", stroke: "currentColor", fill: "none", strokeWidth: "2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 19v3" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: "9", y: "2", width: "6", height: "13", rx: "3" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "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__ */ (0, import_jsx_runtime5.jsxs)(
+                    "svg",
+                    {
+                      width: "20",
+                      height: "20",
+                      viewBox: "0 0 22 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      "stroke-width": "2",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6 12h16" })
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "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__ */ (0, import_jsx_runtime5.jsxs)(
+                    "svg",
+                    {
+                      width: "20",
+                      height: "20",
+                      viewBox: "0 0 22 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      "stroke-width": "2",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6 12h16" })
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ChatContainer.tsx
+var import_react4 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ChatContainer({
+  messages,
+  messageMapper,
+  messageRenderer,
+  loadingRenderer,
+  listClassName,
+  onSend,
+  isSending,
+  disableVoice,
+  placeholder,
+  inputClassName,
+  className
+}) {
+  const [isAtBottom, setIsAtBottom] = (0, import_react4.useState)(true);
+  const scrollRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    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);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: `
+          flex flex-col ${className || ""}
+        `,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            ref: scrollRef,
+            className: `flex-1 overflow-y-auto chatContainer-scroll p-2`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              ChatList,
+              __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+                messages
+              }, messageMapper && { messageMapper }), messageRenderer && { messageRenderer }), loadingRenderer && { loadingRenderer }), listClassName && { className: listClassName })
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-shrink-0 relative", children: [
+          !isAtBottom && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "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__ */ (0, import_jsx_runtime6.jsxs)(
+                "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__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 5v14" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m19 12-7 7-7-7" })
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ChatInput,
+            __spreadValues(__spreadValues(__spreadValues({
+              onSend: handleSend,
+              isSending
+            }, disableVoice && { disableVoice }), placeholder && { placeholder }), inputClassName && { className: inputClassName })
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/hooks/useOptimisticChat.ts
+var import_react_query = require("@tanstack/react-query");
+var import_react5 = require("react");
+function useOptimisticChat({
+  queryKey,
+  queryFn,
+  mutationFn,
+  map,
+  onError,
+  staleTime = 0,
+  gcTime = 0
+}) {
+  const [isPending, setIsPending] = (0, import_react5.useState)(false);
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const {
+    data: messages = [],
+    isLoading: isInitialLoading
+  } = (0, import_react_query.useQuery)({
+    queryKey,
+    queryFn: async () => {
+      const rawList = await queryFn();
+      return rawList.map(map);
+    },
+    staleTime,
+    gcTime
+  });
+  const mutation = (0, import_react_query.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
+    // 초기 로딩 상태
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ChatContainer,
+  ChatInput,
+  ChatList,
+  ChatMessage,
+  LoadingSpinner,
+  SendingDots,
+  useOptimisticChat
+});