react-optimistic-chat 2.2.0 → 2.2.1

package/README.md

@@ -58,17 +58,6 @@ yarn add react-optimistic-chat
 
 <br>
 
-## styles
-<code>react-optimistic-chat</code>의 **채팅 UI 컴포넌트**를 사용하려면  
-아래 스타일 파일을 반드시 import 해야 합니다.
-```ts
-import "react-optimistic-chat/style.css";
-```
-> React 프로젝트에서는 `App.tsx`에,  
-> Next.js(App Router)에서는 루트 `Layout.tsx`에서 import 하는 것을 권장합니다.
-
-<br>
-
 <h1 id="quick-start">🚀 Quick Start</h1>
 
 아래 예제는 서버로부터 전달되는 Raw 채팅 데이터를  
@@ -905,3 +894,4 @@ See the [LICENSE](./LICENSE) file for details.
 
 
 
+

package/dist/index.js

@@ -59,6 +59,46 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles/chatMessage.css
+styleInject(".roc-chat-message {\n  display: flex;\n  align-items: flex-start;\n  margin-bottom: 1rem;\n  width: 100%;\n  box-sizing: border-box;\n}\n.roc-chat-message--left {\n  justify-content: flex-start;\n}\n.roc-chat-message--right {\n  justify-content: flex-end;\n}\n.roc-chat-message__icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #f3f4f6;\n  border-radius: 9999px;\n  border: 2px solid #000;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n}\n.roc-chat-message__icon svg {\n  display: block;\n}\n.roc-chat-message__bubble {\n  padding: 0.75rem;\n  max-width: calc(100% - 3rem);\n  max-height: 24rem;\n  overflow-y: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  box-sizing: border-box;\n}\n.roc-chat-message__bubble--ai {\n  background-color: #f3f4f6;\n  border-radius: 0.75rem;\n}\n.roc-chat-message__bubble--user {\n  background-color: #ffffff;\n  border: 1px solid #e5e7eb;\n  border-radius: 0.75rem 0.75rem 0 0.75rem;\n}\n");
+
+// src/styles/chatList.css
+styleInject(".roc-chat-list {\n  display: flex;\n  flex-direction: column;\n}\n");
+
+// src/styles/chatInput.css
+styleInject('.roc-chat-input {\n  display: flex;\n  border: 1px solid #d1d5db;\n  padding: 8px 8px;\n  border-radius: 24px;\n}\n.roc-chat-input__textarea {\n  width: 100%;\n  resize: none;\n  border: none;\n  font-size: 16px;\n  line-height: 2.2;\n  outline: none;\n  overflow: hidden;\n  padding: 0;\n  padding-left: 8px;\n}\n.roc-chat-input__textarea::-moz-placeholder {\n  color: #9ca3af;\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    "Apple SD Gothic Neo",\n    "Noto Sans KR",\n    "Noto Sans",\n    system-ui,\n    sans-serif;\n}\n.roc-chat-input__textarea::placeholder {\n  color: #9ca3af;\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    "Apple SD Gothic Neo",\n    "Noto Sans KR",\n    "Noto Sans",\n    system-ui,\n    sans-serif;\n}\n.roc-chat-input__button {\n  position: relative;\n  width: 36px;\n  height: 36px;\n  margin-top: auto;\n  flex-shrink: 0;\n  background: none;\n  border: none;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.roc-chat-input__layer {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 24px;\n  opacity: 0;\n  transition: opacity 150ms ease;\n}\n.roc-chat-input__layer.is-active {\n  opacity: 1;\n}\n.roc-chat-input__layer--mic {\n  background: #f3f4f6;\n  color: #374151;\n}\n.roc-chat-input__layer--recording {\n  background: #dc2626;\n  color: #ffffff;\n}\n.roc-chat-input__layer--send {\n  background: #000000;\n  color: #ffffff;\n}\n.roc-chat-input__layer--sending {\n  background: #9ca3af;\n  color: #ffffff;\n}\n');
+
+// src/styles/chatContainer.css
+styleInject(".roc-chat-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.roc-chat-container__list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px;\n}\n.roc-chat-container__loading {\n  display: flex;\n  justify-content: center;\n  padding: 8px 0;\n}\n.roc-chat-container__input {\n  position: relative;\n  flex-shrink: 0;\n}\n.roc-chat-container__scroll-button {\n  position: absolute;\n  bottom: 80px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: #ffffff;\n  border: 1px solid #e5e7eb;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n");
+
+// src/styles/loadingSpinner.css
+styleInject(".roc-spinner-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.roc-spinner {\n  border: 4px solid #e5e7eb;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: roc-spin 1s linear infinite;\n}\n@keyframes roc-spin {\n  to {\n    transform: rotate(1turn);\n  }\n}\n");
+
+// src/styles/sendingDots.css
+styleInject(".roc-sending-dots {\n  display: inline-flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.roc-sending-dot {\n  font-weight: 800;\n  line-height: 1;\n  animation: roc-sending-bounce 1.4s ease-in-out infinite;\n}\n@keyframes roc-sending-bounce {\n  0%, to {\n    opacity: .2;\n    transform: translateY(0);\n  }\n  50% {\n    opacity: 1;\n    transform: translateY(-2px);\n  }\n}\n");
+
 // src/components/indicators/LoadingSpinner.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function LoadingSpinner({ size = "md" }) {

package/dist/index.mjs

@@ -18,6 +18,46 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles/chatMessage.css
+styleInject(".roc-chat-message {\n  display: flex;\n  align-items: flex-start;\n  margin-bottom: 1rem;\n  width: 100%;\n  box-sizing: border-box;\n}\n.roc-chat-message--left {\n  justify-content: flex-start;\n}\n.roc-chat-message--right {\n  justify-content: flex-end;\n}\n.roc-chat-message__icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #f3f4f6;\n  border-radius: 9999px;\n  border: 2px solid #000;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n}\n.roc-chat-message__icon svg {\n  display: block;\n}\n.roc-chat-message__bubble {\n  padding: 0.75rem;\n  max-width: calc(100% - 3rem);\n  max-height: 24rem;\n  overflow-y: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  box-sizing: border-box;\n}\n.roc-chat-message__bubble--ai {\n  background-color: #f3f4f6;\n  border-radius: 0.75rem;\n}\n.roc-chat-message__bubble--user {\n  background-color: #ffffff;\n  border: 1px solid #e5e7eb;\n  border-radius: 0.75rem 0.75rem 0 0.75rem;\n}\n");
+
+// src/styles/chatList.css
+styleInject(".roc-chat-list {\n  display: flex;\n  flex-direction: column;\n}\n");
+
+// src/styles/chatInput.css
+styleInject('.roc-chat-input {\n  display: flex;\n  border: 1px solid #d1d5db;\n  padding: 8px 8px;\n  border-radius: 24px;\n}\n.roc-chat-input__textarea {\n  width: 100%;\n  resize: none;\n  border: none;\n  font-size: 16px;\n  line-height: 2.2;\n  outline: none;\n  overflow: hidden;\n  padding: 0;\n  padding-left: 8px;\n}\n.roc-chat-input__textarea::-moz-placeholder {\n  color: #9ca3af;\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    "Apple SD Gothic Neo",\n    "Noto Sans KR",\n    "Noto Sans",\n    system-ui,\n    sans-serif;\n}\n.roc-chat-input__textarea::placeholder {\n  color: #9ca3af;\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    "Apple SD Gothic Neo",\n    "Noto Sans KR",\n    "Noto Sans",\n    system-ui,\n    sans-serif;\n}\n.roc-chat-input__button {\n  position: relative;\n  width: 36px;\n  height: 36px;\n  margin-top: auto;\n  flex-shrink: 0;\n  background: none;\n  border: none;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.roc-chat-input__layer {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 24px;\n  opacity: 0;\n  transition: opacity 150ms ease;\n}\n.roc-chat-input__layer.is-active {\n  opacity: 1;\n}\n.roc-chat-input__layer--mic {\n  background: #f3f4f6;\n  color: #374151;\n}\n.roc-chat-input__layer--recording {\n  background: #dc2626;\n  color: #ffffff;\n}\n.roc-chat-input__layer--send {\n  background: #000000;\n  color: #ffffff;\n}\n.roc-chat-input__layer--sending {\n  background: #9ca3af;\n  color: #ffffff;\n}\n');
+
+// src/styles/chatContainer.css
+styleInject(".roc-chat-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.roc-chat-container__list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px;\n}\n.roc-chat-container__loading {\n  display: flex;\n  justify-content: center;\n  padding: 8px 0;\n}\n.roc-chat-container__input {\n  position: relative;\n  flex-shrink: 0;\n}\n.roc-chat-container__scroll-button {\n  position: absolute;\n  bottom: 80px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: #ffffff;\n  border: 1px solid #e5e7eb;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n");
+
+// src/styles/loadingSpinner.css
+styleInject(".roc-spinner-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.roc-spinner {\n  border: 4px solid #e5e7eb;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: roc-spin 1s linear infinite;\n}\n@keyframes roc-spin {\n  to {\n    transform: rotate(1turn);\n  }\n}\n");
+
+// src/styles/sendingDots.css
+styleInject(".roc-sending-dots {\n  display: inline-flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.roc-sending-dot {\n  font-weight: 800;\n  line-height: 1;\n  animation: roc-sending-bounce 1.4s ease-in-out infinite;\n}\n@keyframes roc-sending-bounce {\n  0%, to {\n    opacity: .2;\n    transform: translateY(0);\n  }\n  50% {\n    opacity: 1;\n    transform: translateY(-2px);\n  }\n}\n");
+
 // src/components/indicators/LoadingSpinner.tsx
 import { jsx } from "react/jsx-runtime";
 function LoadingSpinner({ size = "md" }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-optimistic-chat",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/dist/index.css

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