@coxwave/tap-sdk 0.0.1

package/README.md

@@ -0,0 +1,390 @@
+# ax-sdk-chatbot
+
+## version: 1.1.0
+
+## 📚 Table of Contents
+
+- [Installation](#installation)
+- [Quick Use](#quick-use)
+- [Types](#types)
+- [Legacy](#legacy)
+- [License](#license)
+
+## installation
+
+### npm
+
+```bash
+npm i ax-sdk-chatbot
+```
+
+### yarn
+
+```bash
+yarn add ax-sdk-chatbot
+```
+
+## Quick Use
+
+### vite
+
+#### Use In Root
+
+```ts
+-main.tsx;
+
+import { createRoot } from "react-dom/client";
+
+import TapSDK from "ax-sdk-chatbot";
+
+import App from "./App.tsx";
+
+import "./index.css";
+
+const sdk = new TapSDK({
+  hostClientUrl: import.meta.env.VITE_CLIENT_URL, // your client url (if you use localhost, your client url is http://localhost:5173)
+  pluginKey: import.meta.env.VITE_FIRSTBRAIN_PLUGIN_KEY,
+  isProd: false,
+});
+
+createRoot(document.getElementById("root")!).render(<App />);
+
+sdk.initChat({
+  chatApiParams: {
+    userId: "user_id",
+    courseId: "course_id",
+    courseName: "course_name",
+    courseCategory: "course_category",
+    courseSubCategory: "course_sub_category",
+    clipId: "clip_id",
+    clipPlayHead:  clip_play_head_number,
+  },
+  shortcutKey: {
+    openChat: { key: "/", modifier: "" },
+    sendChat: { key: "Enter", modifier: "" },
+  },
+  customStyles: {
+    floatingButton: {
+      isInElement: true,
+      parentElementId: "root-button", // <------ here is your Floating Button parent element Id
+    },
+  },
+});
+
+-App.tsx;
+
+import { useEffect, useState } from "react";
+
+import "./App.css";
+
+import TapSDK from "coxwave-sdk";
+
+function App({ sdk }: { sdk: TapSDK }) {
+  const [clipPlayHead, setClipPlayHead] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setClipPlayHead((prev) => prev + 5);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    sdk.postChatInfo({
+      clipId: "58767",
+      clipPlayHead,
+    });
+  }, [clipPlayHead]);
+
+  return (
+    <>
+      <div id="root-button">{Your Floating Button styles Element}</div> // <------ This is your floating button parent element. It must have the same ID as parentElementId.
+    </>
+  );
+}
+
+export default App;
+```
+
+#### Use Custom Hook (with useEffect)
+
+- Test.tsx (can use any component)
+
+```ts
+import { useEffect, useState } from "react";
+
+import TapSDK from "ax-sdk-chatbot";
+
+import BotImage from "./assets/quick-menu.png";
+
+const sdk = new TapSDK({
+  hostClientUrl: import.meta.env.VITE_CLIENT_URL,
+  pluginKey: import.meta.env.VITE_FIRSTBRAIN_PLUGIN_KEY,
+  isProd: import.meta.env.VITE_IS_PROD === "true",
+});
+
+
+function Test() {
+  const [clipPlayHead, setClipPlayHead] = useState(0);
+
+  useEffect(() => {
+    sdk.initChat({
+      chatApiParams: {
+        userId: "user_id",
+        courseId: "course_id",
+        courseName: "course_name",
+        courseCategory: "course_category",
+        courseSubCategory: "course_sub_category",
+        clipId: "clip_id",
+        clipPlayHead: clip_play_head_number,
+      },
+      customStyles: {
+        floatingButton: {
+          isInElement: true,
+          parentElementId: "root-button",
+        },
+      },
+    });
+
+    return () => {
+      sdk.removeChat(); // this is sdk cleanup function
+    };
+  }, []);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setClipPlayHead((prev) => prev + 5);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    sdk.postChatInfo({
+      clipId: "58767",
+      clipPlayHead,
+    });
+  }, [clipPlayHead]);
+
+  return (
+    <S.LayoutContainer $isWhiteBack={true}>
+      <S.ContentBox>
+        <S.RootButton id="root-button">
+          <S.BotImage src={BotImage} />
+          <S.Text>AI 튜터</S.Text>
+        </S.RootButton>
+      </S.ContentBox>
+    </S.LayoutContainer>
+  );
+}
+
+export default Test;
+
+const S = {
+  ~
+} // your styles (this example is for styled-components)
+
+```
+
+### Next.js
+
+- page.tsx
+
+```ts
+import Sdk from "./Sdk";
+
+export default function Home() {
+  return (
+    <Sdk />
+  );
+}
+
+```
+
+- Sdk.tsx
+
+```ts
+"use client"; // if you use this sdk in Next.js, you must use this
+
+import { useEffect, useRef } from "react";
+
+import TapSDK from "ax-sdk-chatbot";
+
+const clientUrl = process.env.NEXT_PUBLIC_HOST_CLIENT_URL; // your client url (if you use localhost, your client url is http://localhost:3000)
+const pluginKey = process.env.NEXT_PUBLIC_COXWAVE_PLUGIN_KEY;
+
+if (!clientUrl) {
+  throw new Error("NEXT_PUBLIC_COXWAVE_CLIENT_URL is not set");
+}
+
+if (!pluginKey) {
+  throw new Error("NEXT_PUBLIC_COXWAVE_PLUGIN_KEY is not set");
+}
+
+function Sdk() {
+  const iframeRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!clientUrl || !pluginKey) return;
+
+    const TapSDKInstance = new TapSDK({
+      hostClientUrl: clientUrl,
+      pluginKey: pluginKey,
+    });
+
+    const init = async () => {
+      try {
+        await TapSDKInstance.initChat({
+          chatApiParams: {
+            userId: "user_id",
+            courseId: "course_id",
+            courseName: "course_name",
+            courseCategory: "course_category",
+            courseSubCategory: "course_sub_category",
+            clipId: "clip_id",
+            clipPlayHead: clip_play_head_number,
+          },
+          customStyles: {
+            floatingButton: {
+              isInElement: true,
+              parentElementId: "root-button", // <------ here is your Floating Button parent element Id
+            },
+          },
+        });
+      } catch (err) {
+        console.error("SDK initChat 실패:", err);
+      }
+    };
+
+    init(); // 즉시 실행
+
+    return () => {
+      TapSDKInstance.removeChat();
+    };
+  }, [clientUrl]);
+
+  return (
+    <div
+      ref={iframeRef}
+      id="root-button" // <------ This is your floating button parent element. It must have the same ID as parentElementId.
+      style={{
+        width: "50px",
+        height: "50px",
+        backgroundColor: "red",
+        cursor: "pointer",
+      }}
+    >
+      <button>Open Chat</button>
+    </div>
+  );
+}
+
+export default Sdk;
+```
+
+## Types
+
+### SDK Class
+
+```ts
+const TapSDKInstance = new TapSDK({
+  hostClientUrl: "~",
+  pluginKey: "~",
+});
+
+type TapSDKType = {
+  hostClientUrl: string;
+  pluginKey: string;
+  isProd?: boolean;
+};
+```
+
+### initChat Method
+
+```ts
+async initChat({
+    chatApiParams,
+    customStyles,
+    shortcutKey,
+  }: {
+    chatApiParams: ChatApiParamsType;
+    customStyles?: CustomStylesType;
+    shortcutKey?: ShortcutKeyType;
+  })
+
+type ChatApiParamsType = {
+  userId: string;
+  courseId: string;
+  courseName: string;
+  courseCategory: string;
+  courseSubCategory: string;
+  clipId: string | null;
+  clipPlayHead: number | null;
+};
+
+type CustomStylesType = {
+  floatingButton?: FloatingButtonType;
+  chatBody?: ChatBodyType;
+};
+
+type ShortcutKeyType = {
+  openChat: ShortcutKeyPropertiesType;
+  sendChat: ShortcutKeyPropertiesType;
+};
+
+type FloatingButtonType = {
+  isInElement?: boolean;
+  parentElementId?: string;
+  style?: Partial<CSSStyleDeclaration>;
+};
+
+type ChatBodyType = {
+  position?: PositionType;
+  width?: string;
+  height?: string;
+};
+
+type PositionType = {
+  top?: string;
+  left?: string;
+  right?: string;
+  bottom?: string;
+};
+
+type ShortcutKeyPropertiesType = {
+  key: string;
+  modifier: "ctrlKey" | "altKey" | "shiftKey" | "metaKey" | "";
+};
+
+```
+
+### postChatInfo Method
+
+```ts
+  postChatInfo({
+    clipId,
+    clipPlayHead,
+  }: {
+    clipId: string;
+    clipPlayHead: number;
+  })
+```
+
+- you must use postChatInfo method after initChat method
+
+### removeChat Method
+
+```ts
+removeChat();
+```
+
+## legacy
+
+Ver 0.x.x: https://www.npmjs.com/package/ax-sdk-chatbot/v/0.3.7
+
+## license
+
+[MIT](https://opensource.org/licenses/MIT)
+
+Copyright (c) 2025-present, Coxwave

package/dist/index.css

@@ -0,0 +1,2 @@
+@keyframes _1mlv4me0{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes _1mlv4me1{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(30px);display:none}}._1mlv4me2{opacity:0;transform:translateY(30px);transition:opacity .4s ease,transform .4s ease;pointer-events:none;display:none}._1mlv4me3{animation:_1mlv4me0 .4s ease forwards;pointer-events:auto}._1mlv4me4{animation:_1mlv4me1 .4s ease forwards;pointer-events:none}._1mlv4me5{border:none!important}@keyframes _6j1ub50{0%{opacity:1;pointer-events:auto}50%{opacity:1}to{opacity:0}}._6j1ub51{pointer-events:none;opacity:0;display:flex;position:absolute;width:max-content;top:calc(100% + 5px);right:0;flex-direction:column;justify-content:center;align-items:flex-end;padding-top:2px;cursor:pointer;z-index:999;transition:opacity .3s ease}._6j1ub52{pointer-events:auto;animation:_6j1ub50 18s forwards}._6j1ub53{opacity:0;pointer-events:none;animation:none}._6j1ub54{display:flex;justify-content:flex-end;border-radius:var(--Radius-radiusSM, 8px);width:max-content;gap:5px}._6j1ub55{display:flex;padding:8px 12px 6px;justify-content:flex-end;align-items:center;border-radius:var(--Radius-radiusSM, 8px);max-width:340px}._6j1ub56{background-color:#171b1f}._6j1ub57{background-color:#fa6b4b}._6j1ub58{color:#fff;text-align:right;font-family:Pretendard;font-size:14px;font-style:normal;font-weight:400;line-height:20px;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word}._6j1ub59{display:flex;padding:0 23px;align-items:flex-start;gap:10px}._6j1ub5a{width:15px}._6j1ub5b{color:#171b1f}._6j1ub5c{color:#fa6b4b}._6j1ub5d{cursor:pointer;justify-content:center;align-items:center;width:20px;height:20px;border-radius:100px;z-index:999;transition:all .2s ease}._6j1ub5d:hover{width:63px;left:-72px}._6j1ub54:hover ._6j1ub5d{display:flex}._6j1ub5e,._6j1ub5f{display:none;background-color:#171b1f}._6j1ub5g{color:#fff}._6j1ub5d:hover ._6j1ub5g{display:none}._6j1ub5h{color:#fff;text-align:center;font-family:Pretendard;font-size:12px;font-style:normal;font-weight:400;line-height:20px;display:none}._6j1ub5d:hover ._6j1ub5h{display:block}.wu2gm60{width:100%;min-width:max-content;table-layout:auto;border-collapse:separate;border-spacing:0;border:.4px solid rgba(118,118,128,.12);border-radius:8px;overflow:auto;background-color:#fff;cursor:pointer}.wu2gm61{border:.4px solid rgba(118,118,128,.12);padding:10px;background-color:#f2f2f2;text-align:left;font-family:Pretendard;color:#090909;font-size:12px;font-weight:500;white-space:normal;overflow-wrap:break-word;word-break:break-word}.wu2gm62{border:.4px solid rgba(118,118,128,.12);padding:10px;color:#090909;font-family:Pretendard;font-size:12px;font-weight:400;width:fit-content;max-width:400px;white-space:normal;overflow-wrap:break-word;word-break:break-word}.wu2gm63{position:relative;background-color:#fafafa;border-radius:8px;padding:8px;overflow-y:auto}.wu2gm64{display:flex;align-items:center;justify-content:space-between;padding-bottom:4px}.wu2gm65{color:#4a5568;padding:2px 6px;font-size:12px;border-radius:4px;z-index:10;font-family:Pretendard}.wu2gm66{z-index:10;cursor:pointer;display:flex;align-items:center;width:max-content;color:#4a5568;padding:2px 6px;font-size:12px;border:none;font-family:Pretendard}.wu2gm67{white-space:nowrap}.wu2gm68{display:flex;width:12px;height:12px;margin-bottom:4px;color:#4a5568;flex-shrink:0}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["vanilla-extract-css-ns:chatBody/chatBody.css.ts.vanilla.css?source=QGtleWZyYW1lcyBfMW1sdjRtZTAgewogIGZyb20gewogICAgb3BhY2l0eTogMDsKICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgzMHB4KTsKICB9CiAgdG8gewogICAgb3BhY2l0eTogMTsKICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwKTsKICB9Cn0KQGtleWZyYW1lcyBfMW1sdjRtZTEgewogIGZyb20gewogICAgb3BhY2l0eTogMTsKICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwKTsKICB9CiAgdG8gewogICAgb3BhY2l0eTogMDsKICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgzMHB4KTsKICAgIGRpc3BsYXk6IG5vbmU7CiAgfQp9Ci5fMW1sdjRtZTIgewogIG9wYWNpdHk6IDA7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDMwcHgpOwogIHRyYW5zaXRpb246IG9wYWNpdHkgMC40cyBlYXNlLCB0cmFuc2Zvcm0gMC40cyBlYXNlOwogIHBvaW50ZXItZXZlbnRzOiBub25lOwogIGRpc3BsYXk6IG5vbmU7Cn0KLl8xbWx2NG1lMyB7CiAgYW5pbWF0aW9uOiBfMW1sdjRtZTAgMC40cyBlYXNlIGZvcndhcmRzOwogIHBvaW50ZXItZXZlbnRzOiBhdXRvOwp9Ci5fMW1sdjRtZTQgewogIGFuaW1hdGlvbjogXzFtbHY0bWUxIDAuNHMgZWFzZSBmb3J3YXJkczsKICBwb2ludGVyLWV2ZW50czogbm9uZTsKfQouXzFtbHY0bWU1IHsKICBib3JkZXI6IG5vbmUgIWltcG9ydGFudDsKfQ==","vanilla-extract-css-ns:floatingButton/alarm/styles/alarm.css.ts.vanilla.css?source=#H4sIAAAAAAAAE61Uy27bMBC8+ysWKAqkaBlI8iMxfWlzyK1A0X5AQYsrizFNCiQVyyny7wUpOtbDblK0J1s7u8vZmSU/b/FQGLZDCz8XD2m9nifwawKQvA8/ALpiuXAHCukqfFdaKIeG4CMqZymw2mmPPE8A5heqPJYmYzBpwefJdTw7DRnDI5RW6DP7dVzYSrIDhUJiswplVjihFQW2tlrWLhTtBXclhR1rSK6VQ+V81OmKQs5kfhV4fYR51XzwgBGb0sUTfGPChcG8bZtrWe+URx5q60RxOHakkKNn7CEmxUYR4XBnW2oEFQ/0GOdCbUg4OqsC5bw2Vht6nNiHnohQHBsKy+UyMDVMHeeKAkByPbWAzOKqo112VrujPUyJHWu7vPic3lootNkzw2230zR06qt9yZNO3zZ0ajMLbUY2jbTrirTWhqMhhnFRWwqPzFwR8j18xeCPr5/gNpp13tsNq6j3s8tlfp5L9IT6jpBmVQOL+OdVpj2fT/b/3QCeeRxiOkv6lBeB8prl243RteIk19Lvyrv0Jr1L77upN5dS778s7mZ33dTbkHrEi6IIO4aNI2Eg2l6AsP1aOVKwnZAHCt8MOlScGf4CWfGEFNJZq1UbcgeJfhHMjsmX6B7bOzVLwiZJoZCUMZYlbfm+FA6JrViOFCqDZG9YFQBtOFkbZFsKW8SKMBk660c0hdT7kEghZBCf3B12+YrrSdVANm0ZjO+tdcycFiod2MNC72heOli3dU/lsWF5Dx+7xFt8/Dq89eE5hSPDo9BD4Qf7miYx/qdniEkJyXU2foI4Lb0vXWUWUV6JhaNAbrK+ULNY0R984NgpHfvw8RF60yUp/qF20/Ur7Oq5sfvZg5NO6eVrV/Bk3hvvYPZf7uBFwsP5yv58a6nz7Wry/Bv1tBtfSwgAAA==","vanilla-extract-css-ns:popUpImage/popUpImage.css.ts.vanilla.css?source=#H4sIAAAAAAAAE7VU7Y7bIBD8n6dYqap0lUKEXSd1uZfoK2B77dBgQIDPzlX37hX4o07qXq9qK0tY7AIzOztw6Lu0aU8Uvu0AelH5M4OE0vePO4BWKDKFWj6QUiuPyoeM54VEIvlVd54B77wO0ULbCi0ptZTcOGTg0HDLPa6SzvBSqIYB/RFkQA+ZGcBpKSqwTcEfkiTfwzik+R7oIUk/rE6xvBKdY5CbIUT1E9pa6n5FhZeXxupOVYGOtgze1XUdMmVnXZgbLZRH+7h72R1GDZKowR9TMryqYkUJHdlsYafhi8rh4AmXolEMJNZRzVorT2reCnll8MWiR1VxW0W20wH0c/iWxU48I4MkHQFjqEfRnD2DI43K9mfhMaqNDJS2LZdrpUhvuWFQWOQX0usRLPxJDN1mFoXSf6TQL6raluB3BWdTwaNRa+HXRg2+nTIZndD/izQfozRGO+GFVgwsSu7FE24bwjbFQ3qke5iHV8y9qHdndnKd7b6QyCKJSjgj+ZVBLTHuiHYjwmPrGJQ42h7ga+e8qK+zXAyiJKRA3yOqFTQptPe6ZZAFBgvaMaLNvcz48XjKbwinZoDTqmO3TbyrNhujz0SoCofglVd9sbA4RRZ323665G9XZfvB+8sqg88Uvq2gT+NTfGvS4MnVmny70fP7PWGfpxsyz1tuG6Fuu7lVWjiOuLMV6hLf6ZfvG7kHlyUGAAA="],"sourcesContent":["@keyframes _1mlv4me0 {\n  from {\n    opacity: 0;\n    transform: translateY(30px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes _1mlv4me1 {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(30px);\n    display: none;\n  }\n}\n._1mlv4me2 {\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 0.4s ease, transform 0.4s ease;\n  pointer-events: none;\n  display: none;\n}\n._1mlv4me3 {\n  animation: _1mlv4me0 0.4s ease forwards;\n  pointer-events: auto;\n}\n._1mlv4me4 {\n  animation: _1mlv4me1 0.4s ease forwards;\n  pointer-events: none;\n}\n._1mlv4me5 {\n  border: none !important;\n}","@keyframes _6j1ub50 {\n  0% {\n    opacity: 1;\n    pointer-events: auto;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n._6j1ub51 {\n  pointer-events: none;\n  opacity: 0;\n  display: flex;\n  position: absolute;\n  width: max-content;\n  top: calc(100% + 5px);\n  right: 0;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-end;\n  padding-top: 2px;\n  cursor: pointer;\n  z-index: 999;\n  transition: opacity 0.3s ease;\n}\n._6j1ub52 {\n  pointer-events: auto;\n  animation: _6j1ub50 18s forwards;\n}\n._6j1ub53 {\n  opacity: 0;\n  pointer-events: none;\n  animation: none;\n}\n._6j1ub54 {\n  display: flex;\n  justify-content: flex-end;\n  border-radius: var(--Radius-radiusSM, 8px);\n  width: max-content;\n  gap: 5px;\n}\n._6j1ub55 {\n  display: flex;\n  padding: 8px 12px 6px 12px;\n  justify-content: flex-end;\n  align-items: center;\n  border-radius: var(--Radius-radiusSM, 8px);\n  max-width: 340px;\n}\n._6j1ub56 {\n  background-color: #171B1F;\n}\n._6j1ub57 {\n  background-color: #FA6B4B;\n}\n._6j1ub58 {\n  color: #fff;\n  text-align: right;\n  font-family: Pretendard;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n}\n._6j1ub59 {\n  display: flex;\n  padding: 0px 23px;\n  align-items: flex-start;\n  gap: 10px;\n}\n._6j1ub5a {\n  width: 15px;\n}\n._6j1ub5b {\n  color: #171B1F;\n}\n._6j1ub5c {\n  color: #FA6B4B;\n}\n._6j1ub5d {\n  cursor: pointer;\n  justify-content: center;\n  align-items: center;\n  width: 20px;\n  height: 20px;\n  border-radius: 100px;\n  z-index: 999;\n  transition: all 0.2s ease;\n}\n._6j1ub5d:hover {\n  width: 63px;\n  left: -72px;\n}\n._6j1ub54:hover ._6j1ub5d {\n  display: flex;\n}\n._6j1ub5e {\n  display: none;\n  background-color: #171B1F;\n}\n._6j1ub5f {\n  display: none;\n  background-color: #171B1F;\n}\n._6j1ub5g {\n  color: white;\n}\n._6j1ub5d:hover ._6j1ub5g {\n  display: none;\n}\n._6j1ub5h {\n  color: #fff;\n  text-align: center;\n  font-family: Pretendard;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  display: none;\n}\n._6j1ub5d:hover ._6j1ub5h {\n  display: block;\n}",".wu2gm60 {\n  width: 100%;\n  min-width: max-content;\n  table-layout: auto;\n  border-collapse: separate;\n  border-spacing: 0;\n  border: 0.4px solid rgba(118, 118, 128, 0.12);\n  border-radius: 8px;\n  overflow: auto;\n  background-color: #fff;\n  cursor: pointer;\n}\n.wu2gm61 {\n  border: 0.4px solid rgba(118, 118, 128, 0.12);\n  padding: 10px;\n  background-color: #f2f2f2;\n  text-align: left;\n  font-family: Pretendard;\n  color: #090909;\n  font-size: 12px;\n  font-weight: 500;\n  white-space: normal;\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n.wu2gm62 {\n  border: 0.4px solid rgba(118, 118, 128, 0.12);\n  padding: 10px;\n  color: #090909;\n  font-family: Pretendard;\n  font-size: 12px;\n  font-weight: 400;\n  width: fit-content;\n  max-width: 400px;\n  white-space: normal;\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n.wu2gm63 {\n  position: relative;\n  background-color: rgb(250, 250, 250);\n  border-radius: 8px;\n  padding: 8px;\n  overflow-y: auto;\n}\n.wu2gm64 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-bottom: 4px;\n}\n.wu2gm65 {\n  color: #4a5568;\n  padding: 2px 6px;\n  font-size: 12px;\n  border-radius: 4px;\n  z-index: 10;\n  font-family: Pretendard;\n}\n.wu2gm66 {\n  z-index: 10;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  width: max-content;\n  color: #4a5568;\n  padding: 2px 6px;\n  font-size: 12px;\n  border: none;\n  font-family: Pretendard;\n}\n.wu2gm67 {\n  white-space: nowrap;\n}\n.wu2gm68 {\n  display: flex;\n  width: 12px;\n  height: 12px;\n  margin-bottom: 4px;\n  color: #4a5568;\n  flex-shrink: 0;\n}"],"mappings":"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","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,189 @@
+import { ChatInitMessage, ChatOpenMessage, ChatCloseMessage, TimelineSeekMessage, AlarmClickMessage, PopUpCloseMessage, PdfEnlargedMessage, PdfShrinkedMessage, ChatInitiatedMessage, ChatOpenedMessage, ChatClosedMessage, AlarmFadeInMessage, PopUpOpenMessage, PdfOpenMessage, PdfCloseMessage, AlarmMessageInstanceType } from '@coxwave/tap-messages';
+
+type Unsubscribe = () => void;
+type Message = {
+    type: string;
+    [key: string]: any;
+};
+declare abstract class Messenger<TToTargetMessages extends Message = Message, TFromTargetMessage extends Message = Message> {
+    protected listeners: Map<TFromTargetMessage["type"], ((event: MessageEvent) => void)[]>;
+    protected unifiedMessageHandler: ((event: MessageEvent) => void) | null;
+    protected on<T extends TFromTargetMessage["type"]>(messageType: T, callback: (data: Extract<TFromTargetMessage, {
+        type: T;
+    }>) => void): Unsubscribe;
+    removeListener(messageType: TFromTargetMessage["type"]): void;
+    removeAllListeners(): void;
+    postMessage(message: TToTargetMessages): boolean;
+    protected abstract isValidOrigin(event: MessageEvent): boolean;
+    protected abstract getMessageTarget(): Window | null;
+    protected abstract getTargetOrigin(): string;
+}
+
+interface HandshakeOptions {
+    timeout?: number;
+    maxRetries?: number;
+    retryInterval?: number;
+}
+
+type ToTapMessage = ChatInitMessage | ChatOpenMessage | ChatCloseMessage | TimelineSeekMessage | AlarmClickMessage | PopUpCloseMessage | PdfEnlargedMessage | PdfShrinkedMessage;
+type FromTapMessage = ChatInitiatedMessage | ChatOpenedMessage | ChatClosedMessage | AlarmFadeInMessage | PopUpOpenMessage | PdfOpenMessage | PdfCloseMessage | TimelineSeekMessage;
+interface ChatInitConfig {
+    chatApiParams: any;
+    customStyles?: any;
+    gaId?: string;
+}
+declare class TapIframeBridge extends Messenger<ToTapMessage, FromTapMessage> {
+    protected hostClientUrl: string;
+    protected pluginKey: string;
+    protected iframe: HTMLIFrameElement | null;
+    constructor({ hostClientUrl, pluginKey, }: {
+        hostClientUrl: string;
+        pluginKey: string;
+    });
+    protected isValidOrigin(event: MessageEvent): boolean;
+    protected getMessageTarget(): Window | null;
+    protected getTargetOrigin(): string;
+    renderIframe({ chatBody, isProd, isLocal, }: {
+        chatBody: HTMLElement;
+        isProd: boolean;
+        isLocal?: boolean;
+    }): Promise<HTMLIFrameElement>;
+    hasIframe(): boolean;
+    removeIframe(): void;
+    get postToTap(): (message: ToTapMessage) => boolean;
+    listenToTap: <T extends "timeline:seek" | "chat:opened" | "chat:initiated" | "chat:closed" | "alarm:fadeIn" | "popUp:open" | "pdf:open" | "pdf:close">(messageType: T, callback: (data: Extract<TimelineSeekMessage, {
+        type: T;
+    }> | Extract<ChatInitiatedMessage, {
+        type: T;
+    }> | Extract<ChatOpenedMessage, {
+        type: T;
+    }> | Extract<ChatClosedMessage, {
+        type: T;
+    }> | Extract<AlarmFadeInMessage, {
+        type: T;
+    }> | Extract<PopUpOpenMessage, {
+        type: T;
+    }> | Extract<PdfOpenMessage, {
+        type: T;
+    }> | Extract<PdfCloseMessage, {
+        type: T;
+    }>) => void) => () => void;
+    performHandshake(config: ChatInitConfig, options?: HandshakeOptions): Promise<ChatInitiatedMessage>;
+}
+
+type TapSDKType = {
+    pluginKey: string;
+    isProd?: boolean;
+    isLocal?: boolean;
+};
+type ChatApiParamsType = {
+    userId: string;
+    courseId: string | null;
+    courseName: string;
+    courseCategory: string;
+    courseSubCategory: string;
+    clipId: string | null;
+    clipPlayHead: number | null;
+};
+type CustomStylesType = {
+    floatingButton?: FloatingButtonType;
+    chatBody?: ChatBodyType;
+    theme?: ThemeType;
+};
+type ShortcutKeyType = {
+    openChat: ShortcutKeyPropertiesType;
+    sendChat: ShortcutKeyPropertiesType;
+};
+type FloatingButtonType = {
+    isInElement?: boolean;
+    parentElementId?: string;
+    style?: Partial<CSSStyleDeclaration>;
+};
+type ChatBodyType = {
+    position?: PositionType;
+    width?: string;
+    height?: string;
+    borderRadius?: string;
+};
+type ThemeType = {
+    iconColor?: string;
+    chatBody?: colorsType;
+    highlightBar?: colorsType;
+    components?: colorsType;
+    AIRecommendGradient?: {
+        base: string;
+        move: string;
+    };
+};
+type PositionType = {
+    top?: string;
+    left?: string;
+    right?: string;
+    bottom?: string;
+};
+
+type ShortcutKeyPropertiesType = {
+    key: string;
+    modifier: "ctrlKey" | "altKey" | "shiftKey" | "metaKey" | "";
+};
+type colorsType = {
+    color?: string;
+    backgroundColor?: string;
+};
+type SeekTimelineParamsType = {
+    clipId: string;
+    clipPlayHead: number;
+};
+
+declare class EventManager {
+    private iframeBridge;
+    constructor(iframeBridge: TapIframeBridge);
+    onTimelineSeek(handler: (clipPlayHead: number, clipId: string) => void): void;
+    onChatOpened(handler: () => void): void;
+    onChatClosed(handler: () => void): void;
+    onChatInitiated(handler: () => void): void;
+    onAlarmFadeIn(handler: (messageInfo: AlarmMessageInstanceType) => void): void;
+    onPopUpOpen(handler: (popUpInfo: PopUpOpenMessage["popUpInfo"]) => void): void;
+    onPdfOpen(handler: () => void): void;
+    onPdfClose(handler: () => void): void;
+}
+
+declare class TapSDK {
+    #private;
+    private pluginKey;
+    private iframeBridge;
+    events: EventManager;
+    private chatBody;
+    private chatBodyMaker;
+    private floatingButtonMaker;
+    private shortcutKey;
+    private isProd;
+    private isLocal;
+    private isOpen;
+    private isPdfOpen;
+    constructor({ pluginKey, isProd, isLocal }: TapSDKType);
+    private setIsOpen;
+    private setIsPdfOpen;
+    seekTimeline({ clipId, clipPlayHead }: SeekTimelineParamsType): void;
+    initChat({ chatApiParams, customStyles, shortcutKey, }: {
+        chatApiParams: ChatApiParamsType;
+        customStyles?: CustomStylesType;
+        shortcutKey?: ShortcutKeyType;
+    }): Promise<void>;
+    removeChat(): void;
+    /**
+     * @deprecated use `seekTimeline` method. gotta be expired at v1.0.0
+     */
+    postChatInfo({ clipId, clipPlayHead, }: {
+        clipId: string;
+        clipPlayHead: number;
+    }): void;
+    /**
+     * @deprecated use `events.onTimelineSeek` method. gotta be expired at v1.0.0
+     */
+    getTimelineInfo({ callback, }: {
+        callback: (clipPlayHead: number, clipId: string) => void;
+    }): void;
+}
+
+export { TapSDK as default };