react-optimistic-chat 2.1.0 → 2.2.0

package/README.md

@@ -364,12 +364,44 @@ const {
 
 <br>
 
-### 🔁 Optimistic Update Flow
-**1.** 사용자가 메시지 전송  
-**2.** USER 메시지 + 로딩 중인 AI 메시지를 즉시 캐시에 삽입  
-**3.** AI 응답이 도착  
-**4.** 로딩 중인 AI 메시지를 실제 응답으로 교체  
-**5.** 에러 발생 시 이전 상태로 rollback  
+### 🔁 useChat Flow
+<table width="892" align="center" bgcolor="white">
+  <tr>
+    <td align="center" bgcolor="white">
+      <img
+        src="https://github.com/user-attachments/assets/6e61356b-0da3-45d9-8791-c11aa0d346e9"
+        width="690"
+        style="display: block; margin: 0 auto;"
+        alt="useChat 호출"
+      />
+    </td>
+  </tr>
+  <tr>
+    <td align="center" bgcolor="white">
+      <b>useChat 호출</b>
+    </td>
+  </tr>
+</table>
+
+<table width="892" align="center" bgcolor="white">
+  <tr>
+    <td align="center" bgcolor="white">
+      <img
+        src="https://github.com/user-attachments/assets/10218350-8844-4bee-b78e-fe4564844e57"
+        width="690"
+        style="display: block; margin: 0 auto;"
+        alt="useChat 실행"
+      />
+    </td>
+  </tr>
+  <tr>
+    <td align="center" bgcolor="white">
+      <b>useChat 실행</b>
+    </td>
+  </tr>
+</table>
+
+
 
 <br>
  
@@ -503,14 +535,42 @@ const {
 
 <br>
  
-### 🔁 Voice-based Optimistic Update Flow
-**1.** 음성 인식 시작  
-**2.** USER 메시지를 빈 content로 캐시에 즉시 삽입  
-**3.** 음성 인식 중간 결과를 실시간으로 메시지에 반영  
-**4.** 음성 인식 종료 + 로딩 중인 AI 메시지를 즉시 캐시에 삽입  
-**5.** 최종 transcript로 AI 요청 전송  
-**6.** AI placeholder 메시지를 실제 응답으로 교체  
-**7.** 에러 또는 빈 입력 시 이전 상태로 rollback  
+### 🔁 useVoiceChat Flow
+<table width="1001" align="center" bgcolor="white">
+  <tr>
+    <td align="center" bgcolor="white">
+      <img
+        src="https://github.com/user-attachments/assets/c80acf37-4886-4c36-a952-e629ccd73088"
+        width="690"
+        style="display: block; margin: 0 auto;"
+        alt="useVoiceChat 호출"
+      />
+    </td>
+  </tr>
+  <tr>
+    <td align="center" bgcolor="white">
+      <b>useVoiceChat 호출</b>
+    </td>
+  </tr>
+</table>
+
+<table width="1001" align="center" bgcolor="white">
+  <tr>
+    <td align="center" bgcolor="white">
+      <img
+        src="https://github.com/user-attachments/assets/92b44439-5db4-474d-875e-8e62a09f157b"
+        width="690"
+        style="display: block; margin: 0 auto;"
+        alt="useVoiceChat 실행"
+      />
+    </td>
+  </tr>
+  <tr>
+    <td align="center" bgcolor="white">
+      <b>useVoiceChat 실행</b>
+    </td>
+  </tr>
+</table>
 
 <br>
 
@@ -843,3 +903,5 @@ See the [LICENSE](./LICENSE) file for details.
 
 
 
+
+

package/dist/index.css

@@ -0,0 +1,214 @@
+/* src/styles/chatMessage.css */
+.roc-chat-message {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+.roc-chat-message--left {
+  justify-content: flex-start;
+}
+.roc-chat-message--right {
+  justify-content: flex-end;
+}
+.roc-chat-message__icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f3f4f6;
+  border-radius: 9999px;
+  border: 2px solid #000;
+  flex-shrink: 0;
+  margin-right: 0.5rem;
+}
+.roc-chat-message__icon svg {
+  display: block;
+}
+.roc-chat-message__bubble {
+  padding: 0.75rem;
+  max-width: calc(100% - 3rem);
+  max-height: 24rem;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  box-sizing: border-box;
+}
+.roc-chat-message__bubble--ai {
+  background-color: #f3f4f6;
+  border-radius: 0.75rem;
+}
+.roc-chat-message__bubble--user {
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem 0.75rem 0 0.75rem;
+}
+
+/* src/styles/chatList.css */
+.roc-chat-list {
+  display: flex;
+  flex-direction: column;
+}
+
+/* src/styles/chatInput.css */
+.roc-chat-input {
+  display: flex;
+  border: 1px solid #d1d5db;
+  padding: 8px 8px;
+  border-radius: 24px;
+}
+.roc-chat-input__textarea {
+  width: 100%;
+  resize: none;
+  border: none;
+  font-size: 16px;
+  line-height: 2.2;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  padding-left: 8px;
+}
+.roc-chat-input__textarea::-moz-placeholder {
+  color: #9ca3af;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Apple SD Gothic Neo",
+    "Noto Sans KR",
+    "Noto Sans",
+    system-ui,
+    sans-serif;
+}
+.roc-chat-input__textarea::placeholder {
+  color: #9ca3af;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Apple SD Gothic Neo",
+    "Noto Sans KR",
+    "Noto Sans",
+    system-ui,
+    sans-serif;
+}
+.roc-chat-input__button {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  margin-top: auto;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  margin-left: 8px;
+  cursor: pointer;
+}
+.roc-chat-input__layer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 24px;
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+.roc-chat-input__layer.is-active {
+  opacity: 1;
+}
+.roc-chat-input__layer--mic {
+  background: #f3f4f6;
+  color: #374151;
+}
+.roc-chat-input__layer--recording {
+  background: #dc2626;
+  color: #ffffff;
+}
+.roc-chat-input__layer--send {
+  background: #000000;
+  color: #ffffff;
+}
+.roc-chat-input__layer--sending {
+  background: #9ca3af;
+  color: #ffffff;
+}
+
+/* src/styles/chatContainer.css */
+.roc-chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.roc-chat-container__list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+.roc-chat-container__loading {
+  display: flex;
+  justify-content: center;
+  padding: 8px 0;
+}
+.roc-chat-container__input {
+  position: relative;
+  flex-shrink: 0;
+}
+.roc-chat-container__scroll-button {
+  position: absolute;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+/* src/styles/loadingSpinner.css */
+.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);
+  }
+}
+
+/* src/styles/sendingDots.css */
+.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);
+  }
+}

package/dist/index.js

@@ -146,12 +146,12 @@ function ChatMessage({
   loadingRenderer
 }) {
   const isAI = role === "AI";
-  const justify = position === "auto" ? isAI ? "justify-start" : "justify-end" : position === "left" ? "justify-start" : "justify-end";
+  const justify = position === "auto" ? isAI ? "left" : "right" : position;
   const defaultAIIcon = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      className: `${aiIconColor}`,
+      className: aiIconColor,
       width: "24",
       height: "24",
       viewBox: "0 0 24 24",
@@ -170,30 +170,41 @@ function ChatMessage({
       ]
     }
   );
-  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
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: `
+        roc-chat-message
+        roc-chat-message--${justify}
+        ${wrapperClassName}
+      `,
+      children: [
+        isAI && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: `
+            roc-chat-message__icon
             ${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}`}
+            children: icon || defaultAIIcon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: `
+          roc-chat-message__bubble
+          ${isAI ? "roc-chat-message__bubble--ai" : "roc-chat-message__bubble--user"}
+          ${isAI ? aiBubbleClassName : userBubbleClassName}
           ${bubbleClassName}
         `,
-        children: isLoading ? loadingRenderer != null ? loadingRenderer : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoadingSpinner, { size: "xs" }) : content
-      }
-    )
-  ] }, id);
+            children: isLoading ? loadingRenderer != null ? loadingRenderer : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoadingSpinner, { size: "xs" }) : content
+          }
+        )
+      ]
+    },
+    id
+  );
 }
 
 // src/components/ChatList.tsx
@@ -207,7 +218,7 @@ function ChatList({
   loadingRenderer
 }) {
   const mappedMessages = messageMapper ? messages.map((msg) => __spreadValues(__spreadValues({}, msg), messageMapper(msg))) : messages;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `flex flex-col ${className}`, children: mappedMessages.map((msg) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `roc-chat-list ${className != null ? className : ""}`, children: mappedMessages.map((msg) => {
     if (messageRenderer) {
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react2.default.Fragment, { children: messageRenderer(msg) }, msg.id);
     }
@@ -385,134 +396,95 @@ function ChatInput({
     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",
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `roc-chat-input ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "textarea",
+      {
+        ref: textareaRef,
+        value: text,
+        onChange: handleChange,
+        placeholder,
+        rows: 1,
+        onKeyDown: handleKeyDown,
+        className: `roc-chat-input__textarea ${inputClassName}`
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        type: "button",
+        disabled: isSending,
+        onClick: activeLayer === "mic" || activeLayer === "recording" ? handleRecord : handleSend,
+        className: "roc-chat-input__button",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              className: `roc-chat-input__layer roc-chat-input__layer--mic ${activeLayer === "mic" ? "is-active" : ""} ${(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: `roc-chat-input__layer roc-chat-input__layer--recording ${activeLayer === "recording" ? "is-active" : ""} ${(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: `roc-chat-input__layer roc-chat-input__layer--send ${activeLayer === "send" ? "is-active" : ""} ${(sendButton == null ? void 0 : sendButton.className) || ""}`,
+              children: (sendButton == null ? void 0 : sendButton.icon) || /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "svg",
                 {
-                  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" })
-                      ]
-                    }
-                  )
+                  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",
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              className: `roc-chat-input__layer roc-chat-input__layer--sending ${activeLayer === "sending" ? "is-active" : ""} ${(sendingButton == null ? void 0 : sendingButton.className) || ""}`,
+              children: (sendingButton == null ? void 0 : sendingButton.icon) || /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "svg",
                 {
-                  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" })
-                      ]
-                    }
-                  )
+                  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
@@ -575,67 +547,59 @@ function ChatContainer(props) {
     });
     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.jsxs)(
-          "div",
-          {
-            ref: scrollRef,
-            className: `flex-1 overflow-y-auto chatContainer-scroll p-2`,
-            children: [
-              hasNextPage && isFetchingNextPage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LoadingSpinner, { size: "sm" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                ChatList,
-                __spreadValues(__spreadValues(__spreadValues({
-                  messages: mappedMessages
-                }, 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" })
-                  ]
-                }
-              )
-            }
-          ),
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `roc-chat-container ${className || ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        ref: scrollRef,
+        className: "roc-chat-container__list",
+        children: [
+          hasNextPage && isFetchingNextPage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "roc-chat-container__loading", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LoadingSpinner, { size: "sm" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            ChatInput,
+            ChatList,
             __spreadValues(__spreadValues(__spreadValues({
-              onSend: handleSend,
-              isSending
-            }, disableVoice && { disableVoice }), placeholder && { placeholder }), inputClassName && { className: inputClassName })
+              messages: mappedMessages
+            }, messageRenderer && { messageRenderer }), loadingRenderer && { loadingRenderer }), listClassName && { className: listClassName })
           )
-        ] })
-      ]
-    }
-  ) });
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "roc-chat-container__input", children: [
+      !isAtBottom && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          className: "roc-chat-container__scroll-button",
+          onClick: scrollToBottom,
+          "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/useChat.ts

package/dist/index.mjs

@@ -105,12 +105,12 @@ function ChatMessage({
   loadingRenderer
 }) {
   const isAI = role === "AI";
-  const justify = position === "auto" ? isAI ? "justify-start" : "justify-end" : position === "left" ? "justify-start" : "justify-end";
+  const justify = position === "auto" ? isAI ? "left" : "right" : position;
   const defaultAIIcon = /* @__PURE__ */ jsxs2(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      className: `${aiIconColor}`,
+      className: aiIconColor,
       width: "24",
       height: "24",
       viewBox: "0 0 24 24",
@@ -129,30 +129,41 @@ function ChatMessage({
       ]
     }
   );
-  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
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: `
+        roc-chat-message
+        roc-chat-message--${justify}
+        ${wrapperClassName}
+      `,
+      children: [
+        isAI && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: `
+            roc-chat-message__icon
             ${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}`}
+            children: icon || defaultAIIcon
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: `
+          roc-chat-message__bubble
+          ${isAI ? "roc-chat-message__bubble--ai" : "roc-chat-message__bubble--user"}
+          ${isAI ? aiBubbleClassName : userBubbleClassName}
           ${bubbleClassName}
         `,
-        children: isLoading ? loadingRenderer != null ? loadingRenderer : /* @__PURE__ */ jsx3(LoadingSpinner, { size: "xs" }) : content
-      }
-    )
-  ] }, id);
+            children: isLoading ? loadingRenderer != null ? loadingRenderer : /* @__PURE__ */ jsx3(LoadingSpinner, { size: "xs" }) : content
+          }
+        )
+      ]
+    },
+    id
+  );
 }
 
 // src/components/ChatList.tsx
@@ -166,7 +177,7 @@ function ChatList({
   loadingRenderer
 }) {
   const mappedMessages = messageMapper ? messages.map((msg) => __spreadValues(__spreadValues({}, msg), messageMapper(msg))) : messages;
-  return /* @__PURE__ */ jsx4("div", { className: `flex flex-col ${className}`, children: mappedMessages.map((msg) => {
+  return /* @__PURE__ */ jsx4("div", { className: `roc-chat-list ${className != null ? className : ""}`, children: mappedMessages.map((msg) => {
     if (messageRenderer) {
       return /* @__PURE__ */ jsx4(React2.Fragment, { children: messageRenderer(msg) }, msg.id);
     }
@@ -344,134 +355,95 @@ function ChatInput({
     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",
+  return /* @__PURE__ */ jsxs3("div", { className: `roc-chat-input ${className}`, children: [
+    /* @__PURE__ */ jsx5(
+      "textarea",
+      {
+        ref: textareaRef,
+        value: text,
+        onChange: handleChange,
+        placeholder,
+        rows: 1,
+        onKeyDown: handleKeyDown,
+        className: `roc-chat-input__textarea ${inputClassName}`
+      }
+    ),
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        disabled: isSending,
+        onClick: activeLayer === "mic" || activeLayer === "recording" ? handleRecord : handleSend,
+        className: "roc-chat-input__button",
+        children: [
+          /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: `roc-chat-input__layer roc-chat-input__layer--mic ${activeLayer === "mic" ? "is-active" : ""} ${(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: `roc-chat-input__layer roc-chat-input__layer--recording ${activeLayer === "recording" ? "is-active" : ""} ${(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: `roc-chat-input__layer roc-chat-input__layer--send ${activeLayer === "send" ? "is-active" : ""} ${(sendButton == null ? void 0 : sendButton.className) || ""}`,
+              children: (sendButton == null ? void 0 : sendButton.icon) || /* @__PURE__ */ jsxs3(
+                "svg",
                 {
-                  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" })
-                      ]
-                    }
-                  )
+                  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",
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: `roc-chat-input__layer roc-chat-input__layer--sending ${activeLayer === "sending" ? "is-active" : ""} ${(sendingButton == null ? void 0 : sendingButton.className) || ""}`,
+              children: (sendingButton == null ? void 0 : sendingButton.icon) || /* @__PURE__ */ jsxs3(
+                "svg",
                 {
-                  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" })
-                      ]
-                    }
-                  )
+                  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
@@ -534,67 +506,59 @@ function ChatContainer(props) {
     });
     await onSend(value);
   };
-  return /* @__PURE__ */ jsx6(Fragment, { children: /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      className: `
-          flex flex-col ${className || ""}
-        `,
-      children: [
-        /* @__PURE__ */ jsxs4(
-          "div",
-          {
-            ref: scrollRef,
-            className: `flex-1 overflow-y-auto chatContainer-scroll p-2`,
-            children: [
-              hasNextPage && isFetchingNextPage && /* @__PURE__ */ jsx6("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx6(LoadingSpinner, { size: "sm" }) }),
-              /* @__PURE__ */ jsx6(
-                ChatList,
-                __spreadValues(__spreadValues(__spreadValues({
-                  messages: mappedMessages
-                }, 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" })
-                  ]
-                }
-              )
-            }
-          ),
+  return /* @__PURE__ */ jsx6(Fragment, { children: /* @__PURE__ */ jsxs4("div", { className: `roc-chat-container ${className || ""}`, children: [
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref: scrollRef,
+        className: "roc-chat-container__list",
+        children: [
+          hasNextPage && isFetchingNextPage && /* @__PURE__ */ jsx6("div", { className: "roc-chat-container__loading", children: /* @__PURE__ */ jsx6(LoadingSpinner, { size: "sm" }) }),
           /* @__PURE__ */ jsx6(
-            ChatInput,
+            ChatList,
             __spreadValues(__spreadValues(__spreadValues({
-              onSend: handleSend,
-              isSending
-            }, disableVoice && { disableVoice }), placeholder && { placeholder }), inputClassName && { className: inputClassName })
+              messages: mappedMessages
+            }, messageRenderer && { messageRenderer }), loadingRenderer && { loadingRenderer }), listClassName && { className: listClassName })
           )
-        ] })
-      ]
-    }
-  ) });
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { className: "roc-chat-container__input", children: [
+      !isAtBottom && /* @__PURE__ */ jsx6(
+        "button",
+        {
+          className: "roc-chat-container__scroll-button",
+          onClick: scrollToBottom,
+          "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/useChat.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-optimistic-chat",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -11,10 +11,7 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build:css": "npx tailwindcss -i ./src/styles/style.css -o ./src/styles/style.css --minify",
-    "copy:css": "copy src\\styles\\style.css public\\style.css",
-    "build:lib": "tsup",
-    "build": "npm run build:css && npm run copy:css && npm run build:lib"
+    "build": "tsup"
   },
   "files": [
     "dist"
@@ -42,6 +39,6 @@
     }
   },
   "sideEffects": [
-    "./dist/style.css"
+    "*.css"
   ]
 }

package/dist/style.css

@@ -1 +0,0 @@
-*,: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)}}