@adens/openwa 0.1.4 → 0.1.6

package/web/components/SessionSidebar.js

@@ -1,167 +0,0 @@
-import { BrandLogo } from "@/components/BrandLogo";
-
-function SessionStatusBadge({ status }) {
-  const colors = {
-    ready: "bg-brand-500/15 text-brand-100 ring-1 ring-brand-400/20",
-    connecting: "bg-amber-500/15 text-amber-100 ring-1 ring-amber-400/20",
-    disconnected: "bg-white/8 text-white/60 ring-1 ring-white/10",
-    error: "bg-red-500/15 text-red-100 ring-1 ring-red-400/20"
-  };
-
-  return (
-    <span className={`rounded-full px-2.5 py-1 text-[11px] font-medium capitalize tracking-[0.08em] ${colors[status] || colors.disconnected}`}>
-      {status}
-    </span>
-  );
-}
-
-function initials(label) {
-  return String(label || "?")
-    .split(" ")
-    .map((part) => part[0])
-    .join("")
-    .slice(0, 2)
-    .toUpperCase();
-}
-
-function SessionAvatar({ label }) {
-  return <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[#202c33] text-sm font-semibold text-white">{initials(label)}</div>;
-}
-
-export function SessionSidebar({
-  sessions,
-  activeSessionId,
-  onSelect,
-  onConnect,
-  onDisconnect,
-  sessionName,
-  sessionPhone,
-  onSessionNameChange,
-  onSessionPhoneChange,
-  onCreateSession
-}) {
-  const activeSession = sessions.find((session) => session.id === activeSessionId) || sessions[0] || null;
-
-  return (
-    <aside className="flex w-[330px] shrink-0 flex-col border-r border-white/6 bg-[#0b141a]">
-      <div className="border-b border-white/6 px-5 py-5">
-        <p className="text-[11px] uppercase tracking-[0.28em] text-brand-100/60">Workspace</p>
-        <div className="mt-3 flex items-center gap-3">
-          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white p-2 shadow-[0_16px_40px_rgba(0,0,0,0.18)]">
-            <BrandLogo variant="square" alt="OpenWA" className="h-full w-full rounded-xl" />
-          </div>
-          <div>
-            <h2 className="text-lg font-semibold text-white">OpenWA Devices</h2>
-            <p className="text-sm text-white/45">Manage multiple numbers in one dashboard.</p>
-          </div>
-        </div>
-      </div>
-
-      <div className="flex-1 overflow-y-auto px-4 py-4">
-        <div className="space-y-2.5">
-          {sessions.map((session) => (
-            <button
-              key={session.id}
-              type="button"
-              className={`w-full rounded-[26px] border px-4 py-3.5 text-left transition ${
-                session.id === activeSessionId
-                  ? "border-brand-500/40 bg-brand-500/10 shadow-panel"
-                  : "border-white/6 bg-white/[0.03] hover:border-white/12 hover:bg-white/[0.05]"
-              }`}
-              onClick={() => onSelect(session.id)}
-            >
-              <div className="flex items-start gap-3">
-                <SessionAvatar label={session.name} />
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-center justify-between gap-3">
-                    <h3 className="truncate font-medium text-white">{session.name}</h3>
-                    <SessionStatusBadge status={session.status} />
-                  </div>
-                  <p className="mt-1 truncate text-sm text-white/45">{session.phoneNumber || "Number will appear after device connects"}</p>
-                </div>
-              </div>
-            </button>
-          ))}
-
-          {sessions.length === 0 ? (
-            <div className="rounded-[26px] border border-dashed border-white/10 bg-white/[0.03] px-4 py-7 text-sm leading-6 text-white/45">
-              No active sessions. Add a new device to start building your OpenWA workspace.
-            </div>
-          ) : null}
-        </div>
-      </div>
-
-      <div className="border-t border-white/6 px-5 py-5">
-        {activeSession ? (
-          <div className="mb-4 rounded-[28px] border border-white/8 bg-gradient-to-b from-white/[0.06] to-white/[0.03] p-4 shadow-panel">
-             <div className="mb-4 flex items-center justify-between gap-3">
-               <div>
-                 <h3 className="font-semibold text-white">{activeSession.name}</h3>
-                 <p className="text-sm text-white/45">{activeSession.phoneNumber || "Waiting for WhatsApp pairing"}</p>
-                 <p className="mt-1 text-xs uppercase tracking-[0.18em] text-white/30">
-                   Transport: {activeSession.transportType === "mock" ? "Mock" : "WhatsApp Web"}
-                 </p>
-               </div>
-               <SessionStatusBadge status={activeSession.status} />
-             </div>
-
-            {activeSession.qrCode ? (
-              <div className="rounded-[24px] bg-white p-3">
-                <img src={activeSession.qrCode} alt="QR Code" className="mx-auto h-40 w-40 rounded-2xl" />
-              </div>
-             ) : (
-               <div className="rounded-[24px] border border-dashed border-white/10 bg-[#111b21] px-4 py-10 text-center text-sm leading-6 text-white/45">
-                 QR code will appear here when session starts pairing.
-               </div>
-             )}
-
-             {activeSession.lastError ? (
-               <div className="mt-3 rounded-2xl border border-red-400/20 bg-red-500/10 px-3 py-2.5 text-sm leading-6 text-red-100">
-                 {activeSession.lastError}
-               </div>
-             ) : null}
-
-             <div className="mt-4 grid grid-cols-2 gap-2">
-              <button
-                type="button"
-                className="rounded-2xl bg-brand-500 px-4 py-3 text-sm font-semibold text-[#10251a] transition hover:bg-brand-600"
-                onClick={() => onConnect(activeSession.id)}
-              >
-                Connect
-              </button>
-              <button
-                type="button"
-                className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm font-medium text-white/80 transition hover:bg-white/[0.06]"
-                onClick={() => onDisconnect(activeSession.id)}
-              >
-                Disconnect
-              </button>
-            </div>
-          </div>
-        ) : null}
-
-        <form className="space-y-3" onSubmit={onCreateSession}>
-          <div>
-            <p className="mb-2 text-[11px] uppercase tracking-[0.26em] text-white/35">Add device</p>
-            <input
-              className="w-full rounded-2xl border border-white/10 bg-[#202c33] px-4 py-3 text-sm text-white outline-none transition placeholder:text-white/30 focus:border-brand-500"
-              placeholder="Session name, e.g. Sales Team"
-              value={sessionName}
-              onChange={(event) => onSessionNameChange(event.target.value)}
-              required
-            />
-          </div>
-          <input
-            className="w-full rounded-2xl border border-white/10 bg-[#202c33] px-4 py-3 text-sm text-white outline-none transition placeholder:text-white/30 focus:border-brand-500"
-            placeholder="Nomor WhatsApp (opsional)"
-            value={sessionPhone}
-            onChange={(event) => onSessionPhoneChange(event.target.value)}
-          />
-          <button type="submit" className="w-full rounded-2xl border border-brand-500/30 bg-brand-500/10 px-4 py-3 text-sm font-semibold text-brand-100 transition hover:bg-brand-500/20">
-            Add WhatsApp Session
-          </button>
-        </form>
-      </div>
-    </aside>
-  );
-}

package/web/components/SettingsModal.js

@@ -1,266 +0,0 @@
-import { useState } from "react";
-import { BrandLogo } from "@/components/BrandLogo";
-
-function SessionStatusBadge({ status }) {
-  const colors = {
-    ready: "bg-brand-500/15 text-brand-100 ring-1 ring-brand-400/20",
-    connecting: "bg-amber-500/15 text-amber-100 ring-1 ring-amber-400/20",
-    disconnected: "bg-white/8 text-white/60 ring-1 ring-white/10",
-    error: "bg-red-500/15 text-red-100 ring-1 ring-red-400/20"
-  };
-
-  return (
-    <span className={`rounded-full px-2.5 py-1 text-[11px] font-medium capitalize tracking-[0.08em] ${colors[status] || colors.disconnected}`}>
-      {status}
-    </span>
-  );
-}
-
-function initials(label) {
-  return String(label || "?")
-    .split(" ")
-    .map((part) => part[0])
-    .join("")
-    .slice(0, 2)
-    .toUpperCase();
-}
-
-function SessionAvatar({ label }) {
-  return <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-[#2e2f2f] text-sm font-semibold text-white">{initials(label)}</div>;
-}
-
-function formatDateTime(value) {
-  if (!value) {
-    return "Never";
-  }
-
-  return new Intl.DateTimeFormat("en-US", {
-    day: "2-digit",
-    month: "short",
-    year: "numeric",
-    hour: "2-digit",
-    minute: "2-digit"
-  }).format(new Date(value));
-}
-
-export function SettingsModal({
-  open,
-  sessions,
-  activeSessionId,
-  onClose,
-  onSelect,
-  onConnect,
-  onDisconnect,
-  sessionName,
-  sessionPhone,
-  onSessionNameChange,
-  onSessionPhoneChange,
-  onCreateSession,
-  apiKeys,
-  apiKeysLoading,
-  apiKeyName,
-  apiKeySecret,
-  onApiKeyNameChange,
-  onCreateApiKey,
-  onRevokeApiKey
-}) {
-  const [copied, setCopied] = useState(false);
-
-  if (!open) {
-    return null;
-  }
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-6 py-8 backdrop-blur-sm">
-      <div className="flex h-full max-h-[840px] w-full max-w-[1080px] flex-col overflow-hidden rounded-[32px] bg-[#161717] shadow-[0_40px_120px_rgba(0,0,0,0.5)]">
-        <div className="flex items-center justify-between px-6 py-5">
-          <div className="flex items-center gap-4">
-            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white p-2 shadow-[0_16px_40px_rgba(0,0,0,0.18)]">
-              <BrandLogo variant="square" alt="OpenWA" className="h-full w-full rounded-xl" />
-            </div>
-            <div>
-              <p className="text-[11px] uppercase tracking-[0.26em] text-white/35">Settings</p>
-              <h2 className="mt-2 text-xl font-semibold text-white">OpenWA Devices</h2>
-            </div>
-          </div>
-          <button type="button" className="rounded-full bg-[#2e2f2f] px-4 py-2 text-sm text-white/70 transition hover:bg-[#3a3b3b] hover:text-white" onClick={onClose}>
-            Close
-          </button>
-        </div>
-
-        <div className="grid min-h-0 flex-1 gap-0 md:grid-cols-[1.2fr_0.8fr]">
-          <div className="min-h-0 px-5 py-5">
-            <div className="h-full overflow-y-auto pr-1">
-              <div className="space-y-3">
-                {sessions.map((session) => (
-                  <button
-                    key={session.id}
-                    type="button"
-                    className={`w-full rounded-[18px] px-4 py-4 text-left transition ${
-                      session.id === activeSessionId
-                        ? "bg-[#2e2f2f]"
-                        : "bg-transparent hover:bg-white/[0.04]"
-                    }`}
-                    onClick={() => onSelect(session.id)}
-                  >
-                    <div className="flex items-start gap-3">
-                      <SessionAvatar label={session.name} />
-                      <div className="min-w-0 flex-1">
-                        <div className="flex items-center justify-between gap-3">
-                          <h3 className="truncate font-medium text-white">{session.name}</h3>
-                          <SessionStatusBadge status={session.status} />
-                        </div>
-                        <p className="mt-1 text-sm text-white/45">{session.phoneNumber || "Waiting for WhatsApp pairing"}</p>
-                        <p className="mt-2 text-xs uppercase tracking-[0.16em] text-white/30">
-                          Transport: {session.transportType === "mock" ? "Mock" : "WhatsApp Web"}
-                        </p>
-                        {session.lastError ? <p className="mt-3 rounded-2xl bg-red-500/10 px-3 py-2 text-sm text-red-100">{session.lastError}</p> : null}
-                      </div>
-                    </div>
-
-                    <div className="mt-4 flex gap-2">
-                      <button
-                        type="button"
-                        className="rounded-2xl bg-brand-500 px-4 py-2 text-sm font-semibold text-[#10251a]"
-                        onClick={(event) => {
-                          event.stopPropagation();
-                          onConnect(session.id);
-                        }}
-                      >
-                        Connect
-                      </button>
-                      <button
-                        type="button"
-                        className="rounded-2xl bg-[#2e2f2f] px-4 py-2 text-sm text-white/75"
-                        onClick={(event) => {
-                          event.stopPropagation();
-                          onDisconnect(session.id);
-                        }}
-                      >
-                        Disconnect
-                      </button>
-                    </div>
-                  </button>
-                ))}
-              </div>
-            </div>
-          </div>
-
-          <div className="min-h-0 overflow-y-auto px-6 py-5">
-            <div className="rounded-[28px] bg-[#161717] p-4">
-              <p className="text-[11px] uppercase tracking-[0.24em] text-white/35">Pairing QR</p>
-              {sessions.find((session) => session.id === activeSessionId)?.qrCode ? (
-                <div className="mt-4 rounded-[24px] bg-white p-4">
-                  <img
-                    src={sessions.find((session) => session.id === activeSessionId)?.qrCode}
-                    alt="QR Code"
-                    className="mx-auto h-56 w-56 rounded-2xl"
-                  />
-                </div>
-              ) : (
-                <div className="mt-4 rounded-[24px] bg-[#2e2f2f] px-4 py-16 text-center text-sm leading-6 text-white/40">
-                  QR code for pairing will appear here when session is connecting.
-                </div>
-              )}
-            </div>
-
-            <form className="mt-5 space-y-3 rounded-[28px] bg-[#161717] p-4" onSubmit={onCreateSession}>
-              <div>
-                <p className="mb-2 text-[11px] uppercase tracking-[0.24em] text-white/35">Add device</p>
-                <input
-                  className="w-full rounded-[22px] bg-[#2e2f2f] px-4 py-3 text-sm text-white outline-none placeholder:text-white/30"
-                  placeholder="Session name, e.g. Sales Team"
-                  value={sessionName}
-                  onChange={(event) => onSessionNameChange(event.target.value)}
-                  required
-                />
-              </div>
-              <input
-                className="w-full rounded-[22px] bg-[#2e2f2f] px-4 py-3 text-sm text-white outline-none placeholder:text-white/30"
-                placeholder="WhatsApp number (optional)"
-                value={sessionPhone}
-                onChange={(event) => onSessionPhoneChange(event.target.value)}
-              />
-              <button type="submit" className="w-full rounded-2xl bg-brand-500 px-4 py-3 text-sm font-semibold text-[#10251a]">
-                Add WhatsApp Session
-              </button>
-            </form>
-
-            <div className="mt-5 rounded-[28px] bg-[#161717] p-4">
-              <div className="flex items-start justify-between gap-4">
-                <div>
-                  <p className="text-[11px] uppercase tracking-[0.24em] text-white/35">API Access</p>
-                  <h3 className="mt-2 text-base font-semibold text-white">Generate API key</h3>
-                  <p className="mt-2 text-sm leading-6 text-white/45">Use with external agents via `X-API-Key` header or `Authorization: Bearer &lt;api-key&gt;`.</p>
-                </div>
-              </div>
-
-              {apiKeySecret ? (
-                <div className="mt-4 rounded-[22px] bg-[#2e2f2f] p-4">
-                  <p className="text-[11px] uppercase tracking-[0.22em] text-brand-200/80">Shown once</p>
-                  <p className="mt-2 break-all font-mono text-sm text-white">{apiKeySecret}</p>
-                  <button
-                    type="button"
-                    className="mt-3 rounded-full bg-brand-500 px-4 py-2 text-sm font-semibold text-[#10251a]"
-                    onClick={async () => {
-                      await navigator.clipboard.writeText(apiKeySecret);
-                      setCopied(true);
-                      setTimeout(() => setCopied(false), 1500);
-                    }}
-                  >
-                    {copied ? "Copied" : "Copy API key"}
-                  </button>
-                </div>
-              ) : null}
-
-              <form className="mt-4 flex gap-2" onSubmit={onCreateApiKey}>
-                <input
-                  className="w-full rounded-[22px] bg-[#2e2f2f] px-4 py-3 text-sm text-white outline-none placeholder:text-white/30"
-                  placeholder="Key name, e.g. OpenClaw Agent"
-                  value={apiKeyName}
-                  onChange={(event) => onApiKeyNameChange(event.target.value)}
-                  required
-                />
-                <button type="submit" className="shrink-0 rounded-[22px] bg-brand-500 px-4 py-3 text-sm font-semibold text-[#10251a]">
-                  Generate
-                </button>
-              </form>
-
-              <div className="mt-4 max-h-[260px] space-y-3 overflow-y-auto pr-1">
-                {apiKeysLoading ? <div className="rounded-[22px] bg-[#2e2f2f] px-4 py-6 text-sm text-white/45">Loading API keys...</div> : null}
-
-                {!apiKeysLoading && !apiKeys.length ? (
-                  <div className="rounded-[22px] bg-[#2e2f2f] px-4 py-6 text-sm leading-6 text-white/45">
-                    No API keys yet. Create one for OpenAPI client, AI agents, or external integrations.
-                  </div>
-                ) : null}
-
-                {apiKeys.map((apiKey) => (
-                  <div key={apiKey.id} className="rounded-[22px] bg-[#2e2f2f] px-4 py-4">
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="min-w-0">
-                        <h4 className="truncate text-sm font-semibold text-white">{apiKey.name}</h4>
-                        <p className="mt-1 font-mono text-xs text-white/55">{apiKey.maskedKey}</p>
-                      </div>
-                      <button
-                        type="button"
-                        className="rounded-full bg-white/5 px-3 py-1.5 text-xs font-medium text-red-200 transition hover:bg-red-500/15"
-                        onClick={() => onRevokeApiKey(apiKey.id)}
-                      >
-                        Revoke
-                      </button>
-                    </div>
-                    <div className="mt-3 grid gap-2 text-xs text-white/40">
-                      <p>Created: {formatDateTime(apiKey.createdAt)}</p>
-                      <p>Last used: {formatDateTime(apiKey.lastUsedAt)}</p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/web/components/Skeletons.js

@@ -1,73 +0,0 @@
-export function MessageSkeleton() {
-  return (
-    <div className="flex justify-start">
-      <div className="max-w-[72%] space-y-2 rounded-[18px] bg-[#2e2f2f] px-4 py-3">
-        <div className="h-4 w-48 animate-pulse rounded bg-white/10" />
-        <div className="h-4 w-40 animate-pulse rounded bg-white/10" />
-        <div className="mt-3 flex justify-between">
-          <div className="h-3 w-12 animate-pulse rounded bg-white/5" />
-          <div className="h-3 w-8 animate-pulse rounded bg-white/5" />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function MessagesSkeletonList() {
-  return (
-    <div className="space-y-3">
-      {Array.from({ length: 5 }).map((_, i) => (
-        <MessageSkeleton key={i} />
-      ))}
-    </div>
-  );
-}
-
-export function ConversationSkeleton() {
-  return (
-    <div className="flex items-center gap-3 border-b border-white/5 px-3 py-3 transition hover:bg-white/5 cursor-pointer">
-      <div className="h-12 w-12 animate-pulse rounded-2xl bg-white/10" />
-      <div className="flex-1 min-w-0">
-        <div className="h-4 w-32 animate-pulse rounded bg-white/10 mb-2" />
-        <div className="h-3 w-48 animate-pulse rounded bg-white/5" />
-      </div>
-      <div className="h-3 w-10 animate-pulse rounded bg-white/5" />
-    </div>
-  );
-}
-
-export function ConversationsSkeletonList() {
-  return (
-    <div>
-      {Array.from({ length: 8 }).map((_, i) => (
-        <ConversationSkeleton key={i} />
-      ))}
-    </div>
-  );
-}
-
-export function ImageGroupSkeleton() {
-  return (
-    <div className="flex justify-start">
-      <div className="max-w-[72%] rounded-[18px] overflow-hidden bg-[#2e2f2f]">
-        <div className="grid grid-cols-2 gap-1 p-1">
-          {Array.from({ length: 4 }).map((_, i) => (
-            <div key={i} className="h-32 w-32 animate-pulse rounded-lg bg-white/10" />
-          ))}
-        </div>
-        <div className="px-4 py-3 border-t border-white/10">
-          <div className="h-3 w-20 animate-pulse rounded bg-white/5" />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function SendButtonSpinner() {
-  return (
-    <svg className="h-5 w-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-    </svg>
-  );
-}

package/web/jsconfig.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": [
-        "./*"
-      ]
-    }
-  }
-}

package/web/lib/api.js

@@ -1,33 +0,0 @@
-export function getApiBaseUrl() {
-  return process.env.NEXT_PUBLIC_API_URL || "http://localhost:55222";
-}
-
-export async function apiFetch(url, options = {}) {
-  const target = `${getApiBaseUrl()}${url}`;
-  const authHeaders = {
-    ...(options.token ? { Authorization: `Bearer ${options.token}` } : {}),
-    ...(options.apiKey ? { "X-API-Key": options.apiKey } : {})
-  };
-  const response = await fetch(target, {
-    method: options.method || "GET",
-    headers: options.formData
-      ? {
-          ...authHeaders
-        }
-      : {
-          "Content-Type": "application/json",
-          ...authHeaders
-        },
-    body: options.formData || (options.body ? JSON.stringify(options.body) : undefined)
-  });
-
-  const payload = await response.json().catch(() => ({}));
-
-  if (!response.ok) {
-    const error = new Error(payload.error || "Request failed.");
-    error.status = response.status;
-    throw error;
-  }
-
-  return payload;
-}

package/web/lib/socket.js

@@ -1,9 +0,0 @@
-import { io } from "socket.io-client";
-
-export function createSocket(token) {
-  return io(process.env.NEXT_PUBLIC_SOCKET_URL || "http://localhost:55222", {
-    auth: {
-      token
-    }
-  });
-}

package/web/pages/_app.js

@@ -1,5 +0,0 @@
-import "@/styles/globals.css";
-
-export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />;
-}