fix: chat

Author: Rus-Lan-R

apps/shopify-app/embeded/chat.tsx

@@ -1,48 +1,53 @@
+import { createRoot } from "react-dom/client";
 import Sprite from "app/components/SpriteIcon/Sprite";
 import PublicChat from "app/components/publicChat/PublicChat";
-import ReactDOM from "react-dom";
 
-const renderComponent = () => {
+function getOrCreateUserId(): string {
+  let userId = localStorage.getItem("chat-user-id");
+  if (!userId) {
+    userId = Date.now().toString();
+    localStorage.setItem("chat-user-id", userId);
+  }
+  return userId;
+}
+
+function renderChat() {
   const container = document.getElementById("support-ai-chat-place");
-  if (container) {
-    const shopName = container?.getAttribute("data-shopName");
-    const position = container.getAttribute("data-position");
-    const localChatId = localStorage.getItem("supportAiChatId");
+  if (!container) return;
 
-    let userId = localStorage.getItem("chat-user-id");
-    if (!userId) {
-      userId = Date.now().toString();
-      localStorage.setItem("chat-user-id", userId);
-    }
+  const shopName = container.getAttribute("data-shopName") ?? "";
+  const position = container.getAttribute("data-position") ?? "right";
+  const localChatId = localStorage.getItem("supportAiChatId");
+  const userId = getOrCreateUserId();
 
-    ReactDOM.render(
-      <>
-        <div
-          style={{
-            width: 0,
-            height: 0,
-            overflow: "hidden",
-            visibility: "hidden",
-          }}
-        >
-          <Sprite />
-        </div>
-        <PublicChat
-          shopName={shopName}
-          userId={userId}
-          position={position || "right"}
-          chatId={
-            localChatId && localChatId !== "undefined" ? localChatId : null
-          }
-        />
-      </>,
-      container,
-    );
-  }
-};
+  const chatId =
+    localChatId && localChatId !== "undefined" ? localChatId : null;
+
+  const root = createRoot(container);
+  root.render(
+    <>
+      <div
+        style={{
+          width: 0,
+          height: 0,
+          overflow: "hidden",
+          visibility: "hidden",
+        }}
+      >
+        <Sprite />
+      </div>
+      <PublicChat
+        shopName={shopName}
+        userId={userId}
+        position={position}
+        chatId={chatId}
+      />
+    </>,
+  );
+}
 
 if (document.readyState === "loading") {
-  document.addEventListener("DOMContentLoaded", renderComponent);
+  document.addEventListener("DOMContentLoaded", renderChat);
 } else {
-  renderComponent();
+  renderChat();
 }

apps/shopify-app/extensions/chat/assets/chat.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../../../private/var/folders/d8/kn6sfphj67n572x21m44vz4r0000gn/T/tmp-22136-SqNW8n4P73ek/Users/ruslan/my/shopify/apps/ai-assistant/shopify-ai-bot/apps/shopify-app/app/components/publicChat/styles.css */
+/* ../../../../../../../../../private/var/folders/d8/kn6sfphj67n572x21m44vz4r0000gn/T/tmp-22932-KKj3Rfnf7BsO/Users/ruslan/my/shopify/apps/ai-assistant/shopify-ai-bot/apps/shopify-app/app/components/publicChat/styles.css */
 *,
 ::after,
 ::before {