@adens/openwa 0.1.0

package/web/store/useAppStore.js

@@ -0,0 +1,209 @@
+import { create } from "zustand";
+
+function readToken() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  return window.localStorage.getItem("openwa-token");
+}
+
+function writeToken(token) {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  if (token) {
+    window.localStorage.setItem("openwa-token", token);
+    return;
+  }
+
+  window.localStorage.removeItem("openwa-token");
+}
+
+function recentChatTimestamp(chat) {
+  return chat?.contact?.lastMessageAt || chat?.lastMessage?.createdAt || null;
+}
+
+function sortChats(chats) {
+  return [...chats].sort((left, right) => {
+    const leftRecent = recentChatTimestamp(left);
+    const rightRecent = recentChatTimestamp(right);
+
+    if (leftRecent && rightRecent) {
+      return new Date(rightRecent) - new Date(leftRecent);
+    }
+
+    if (rightRecent) {
+      return 1;
+    }
+
+    if (leftRecent) {
+      return -1;
+    }
+
+    return new Date(right.updatedAt) - new Date(left.updatedAt);
+  });
+}
+
+export const useAppStore = create((set, get) => ({
+  token: null,
+  user: null,
+  sessions: [],
+  chats: [],
+  activeChatId: null,
+  activeSessionId: null,
+  messagesByChat: {},
+  messageMetaByChat: {},
+  typingByChat: {},
+  socket: null,
+  hydrateAuth: () => {
+    set({ token: readToken() });
+  },
+  setAuth: ({ token, user }) => {
+    writeToken(token);
+    set({ token, user });
+  },
+  logout: () => {
+    writeToken(null);
+    get().socket?.close();
+    set({
+      token: null,
+      user: null,
+      sessions: [],
+      chats: [],
+      activeChatId: null,
+      activeSessionId: null,
+      messagesByChat: {},
+      messageMetaByChat: {},
+      typingByChat: {},
+      socket: null
+    });
+  },
+  setBootstrapData: (payload) => {
+    const sortedChats = sortChats(payload.chats || []);
+    set((state) => ({
+      user: payload.user,
+      sessions: payload.sessions || [],
+      chats: sortedChats,
+      activeChatId: payload.activeChatId || sortedChats[0]?.id || null,
+      activeSessionId: state.activeSessionId || null,
+      messagesByChat: payload.activeChatId
+        ? {
+            ...state.messagesByChat,
+            [payload.activeChatId]: payload.messages || []
+          }
+        : state.messagesByChat,
+      messageMetaByChat: payload.activeChatId
+        ? {
+            ...state.messageMetaByChat,
+            [payload.activeChatId]: {
+              hasMore: Boolean(payload.hasMoreMessages),
+              nextBefore: payload.nextBefore || null
+            }
+          }
+        : state.messageMetaByChat
+    }));
+  },
+  setMessages: (chatId, messages, meta = null) => {
+    set((state) => ({
+      messagesByChat: {
+        ...state.messagesByChat,
+        [chatId]: messages
+      },
+      messageMetaByChat: meta
+        ? {
+            ...state.messageMetaByChat,
+            [chatId]: meta
+          }
+        : state.messageMetaByChat
+    }));
+  },
+  prependMessages: (chatId, messages, meta) => {
+    set((state) => ({
+      messagesByChat: {
+        ...state.messagesByChat,
+        [chatId]: [...messages, ...(state.messagesByChat[chatId] || [])]
+      },
+      messageMetaByChat: {
+        ...state.messageMetaByChat,
+        [chatId]: meta
+      }
+    }));
+  },
+  setActiveChat: (chatId) => set({ activeChatId: chatId }),
+  setActiveSession: (sessionId) => set({ activeSessionId: sessionId }),
+  upsertSession: (session) => {
+    set((state) => {
+      const normalizedSession = {
+        ...session,
+        id: session.id || session.sessionId
+      };
+      const sessions = state.sessions.some((item) => item.id === normalizedSession.id)
+        ? state.sessions.map((item) => (item.id === normalizedSession.id ? { ...item, ...normalizedSession } : item))
+        : [normalizedSession, ...state.sessions];
+
+      return {
+        sessions,
+        activeSessionId: state.activeSessionId || normalizedSession.id || null
+      };
+    });
+  },
+  upsertChat: (chat) => {
+    set((state) => {
+      const chats = state.chats.some((item) => item.id === chat.id)
+        ? state.chats.map((item) => (item.id === chat.id ? { ...item, ...chat } : item))
+        : [chat, ...state.chats];
+
+      return {
+        chats: sortChats(chats)
+      };
+    });
+  },
+  addMessage: (message) => {
+    set((state) => ({
+      messagesByChat: {
+        ...state.messagesByChat,
+        [message.chatId]: [...(state.messagesByChat[message.chatId] || []), message]
+      }
+    }));
+  },
+  updateMessageStatus: ({ messageId, status }) => {
+    set((state) => {
+      const nextMessagesByChat = Object.fromEntries(
+        Object.entries(state.messagesByChat).map(([chatId, messages]) => [
+          chatId,
+          messages.map((message) =>
+            message.id === messageId
+              ? {
+                  ...message,
+                  statuses: [...(message.statuses || []), { status, createdAt: new Date().toISOString() }]
+                }
+              : message
+          )
+        ])
+      );
+
+      return { messagesByChat: nextMessagesByChat };
+    });
+  },
+  updateMessage: (message) => {
+    set((state) => ({
+      messagesByChat: Object.fromEntries(
+        Object.entries(state.messagesByChat).map(([chatId, messages]) => [
+          chatId,
+          messages.map((item) => (item.id === message.id ? { ...item, ...message } : item))
+        ])
+      )
+    }));
+  },
+  setTyping: ({ chatId, isTyping, name, userId }) => {
+    set((state) => ({
+      typingByChat: {
+        ...state.typingByChat,
+        [chatId]: { isTyping, name, userId }
+      }
+    }));
+  },
+  setSocket: (socket) => set({ socket })
+}));

package/web/styles/globals.css

@@ -0,0 +1,52 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body,
+#__next {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #111b21;
+  color: #ffffff;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+textarea {
+  resize: vertical;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: inherit;
+  opacity: 0.7;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 999px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}

package/web/tailwind.config.js

@@ -0,0 +1,36 @@
+const path = require("path");
+
+module.exports = {
+  content: [
+    path.join(__dirname, "pages/**/*.{js,jsx}"),
+    path.join(__dirname, "components/**/*.{js,jsx}"),
+    path.join(__dirname, "store/**/*.{js,jsx}"),
+    path.join(__dirname, "lib/**/*.{js,jsx}")
+  ],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          50: "#edfdf7",
+          100: "#d2f8e9",
+          500: "#25d366",
+          600: "#1ea952",
+          700: "#167b3c"
+        },
+        ink: {
+          900: "#111b21",
+          800: "#202c33",
+          700: "#2a3942",
+          500: "#667781",
+          200: "#d1d7db",
+          100: "#e9edef",
+          50: "#f0f2f5"
+        }
+      },
+      boxShadow: {
+        panel: "0 1px 3px rgba(17, 27, 33, 0.08), 0 8px 24px rgba(17, 27, 33, 0.06)"
+      }
+    }
+  },
+  plugins: []
+};