feat(bots): bot framework polish + store

- /ws/bot endpoint: bot token auth via query param, SHA-256 lookup - Bot WS actions: SEND_MESSAGE + DELETE_MESSAGE handled in gateway - Bot messages: bot_id on messages table, bot badge in chat (green + BOT tag) - Bot store: /bots lists all bots with server count + add-to-server - Bot manager moved to /bots/manage - Fix: command routes were double-nested under /bots/{botID}/commands - Fix: fetchServerCommands route corrected to /bots/servers/...
2026-07-15 12:45:44 -04:00
parent 56af584ede
commit 5bdb758d23
13 changed files with 557 additions and 22 deletions
@@ -5,6 +5,7 @@ import { Layout } from './components/Layout.tsx';
 import { ChatArea } from './components/ChatArea.tsx';
 import { UserSettings } from './components/UserSettings.tsx';
 import { BotManager } from './components/BotManager.tsx';
+import { BotStore } from './components/BotStore.tsx';
 import { CommandManager } from './components/CommandManager.tsx';
 import { RoleManager } from './components/RoleManager.tsx';
 import { JoinServer } from './components/JoinServer.tsx';
@@ -69,11 +70,23 @@ function App() {
        />
        <Route
          path="/bots"
+          element={
+            <ProtectedRoute>
+              <div className="h-full w-full flex flex-col bg-gb-bg">
+                <div className="flex-1 overflow-hidden">
+                  <BotStore />
+                </div>
+              </div>
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/bots/manage"
          element={
            <ProtectedRoute>
              <div className="h-full w-full flex flex-col bg-gb-bg">
                <header className="flex items-center gap-4 px-4 py-2 border-b border-gb-bg-t bg-gb-bg-s">
-                  <Link to="/" className="text-gb-fg-f hover:text-gb-aqua font-mono text-sm">
+                  <Link to="/bots" className="text-gb-fg-f hover:text-gb-aqua font-mono text-sm">
                    ← [BACK]
                  </Link>
                  <span className="text-gb-orange font-mono text-sm">BOT MANAGER</span>
@@ -91,7 +104,7 @@ function App() {
            <ProtectedRoute>
              <div className="h-full w-full flex flex-col bg-gb-bg">
                <header className="flex items-center gap-4 px-4 py-2 border-b border-gb-bg-t bg-gb-bg-s">
-                  <Link to="/bots" className="text-gb-fg-f hover:text-gb-aqua font-mono text-sm">
+                  <Link to="/bots/manage" className="text-gb-fg-f hover:text-gb-aqua font-mono text-sm">
                    ← [BACK]
                  </Link>
                  <span className="text-gb-orange font-mono text-sm">SLASH COMMANDS</span>
@@ -348,8 +348,8 @@ export function BotManager() {

          {/* Footer */}
          <div className="mt-6 pt-4 border-t border-gb-bg-t">
-            <Link to="/" className="text-gb-fg-f hover:text-gb-aqua font-mono text-sm">
-              {'<'} [BACK TO CHAT]
+            <Link to="/bots" className="text-gb-fg-f hover:text-gb-aqua font-mono text-sm">
+              {'<'} [BACK TO STORE]
            </Link>
          </div>
        </div>
@@ -0,0 +1,187 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useBotStore, type StoreBot } from '../stores/bot.ts';
+import { useServerStore } from '../stores/server.ts';
+import { useAuthStore } from '../stores/auth.ts';
+
+export function BotStore() {
+  const storeBots = useBotStore((s) => s.storeBots);
+  const loading = useBotStore((s) => s.loading);
+  const error = useBotStore((s) => s.error);
+  const fetchStoreBots = useBotStore((s) => s.fetchStoreBots);
+  const addToServer = useBotStore((s) => s.addToServer);
+
+  const servers = useServerStore((s) => s.servers);
+  const fetchServers = useServerStore((s) => s.fetchServers);
+  const currentUserId = useAuthStore((s) => s.user?.id);
+
+  const [addBotId, setAddBotId] = useState<string | null>(null);
+  const [selectedServer, setSelectedServer] = useState('');
+  const [adding, setAdding] = useState(false);
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    fetchStoreBots();
+    fetchServers();
+  }, [fetchStoreBots, fetchServers]);
+
+  const handleAdd = async () => {
+    if (!addBotId || !selectedServer) return;
+    setAdding(true);
+    try {
+      await addToServer(addBotId, selectedServer);
+      setAddBotId(null);
+      setSelectedServer('');
+      fetchStoreBots(); // refresh counts
+    } catch {
+      // error in store
+    } finally {
+      setAdding(false);
+    }
+  };
+
+  const filtered = storeBots.filter((b) =>
+    b.name.toLowerCase().includes(search.toLowerCase()) ||
+    b.description.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div className="h-full w-full bg-gb-bg p-4 md:p-8 overflow-y-auto">
+      <div className="max-w-3xl mx-auto">
+        <div className="border border-gb-bg-t p-6">
+          <pre className="text-gb-orange font-mono text-center mb-2">
+            {'┌──────────────────────────────────┐\n'}
+            {'│       === BOT STORE ===          │\n'}
+            {'└──────────────────────────────────┘'}
+          </pre>
+          <p className="text-gb-fg-f font-mono text-xs text-center mb-6">
+            browse and add bots to your servers
+          </p>
+
+          {error && (
+            <p className="text-gb-red text-sm font-mono mb-4">ERR: {error}</p>
+          )}
+
+          {/* Search */}
+          <div className="mb-6">
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="search bots..."
+              className="terminal-input w-full"
+            />
+          </div>
+
+          {/* Bot list */}
+          {loading && storeBots.length === 0 && (
+            <p className="text-gb-fg-f font-mono text-sm">[loading...]</p>
+          )}
+          {!loading && filtered.length === 0 && (
+            <p className="text-gb-fg-f font-mono text-sm">[no bots found]</p>
+          )}
+
+          <div className="space-y-3">
+            {filtered.map((bot) => (
+              <StoreBotCard
+                key={bot.id}
+                bot={bot}
+                isOwner={bot.owner_id === currentUserId}
+                onAdd={() => { setAddBotId(bot.id); setSelectedServer(''); }}
+              />
+            ))}
+          </div>
+
+          {/* Add to server modal */}
+          {addBotId && (
+            <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
+              <div className="border border-gb-bg-t bg-gb-bg p-6 max-w-md w-full mx-4">
+                <p className="text-gb-orange font-mono text-sm mb-4">
+                  {'>'} ADD BOT TO SERVER
+                </p>
+                <select
+                  value={selectedServer}
+                  onChange={(e) => setSelectedServer(e.target.value)}
+                  className="terminal-input w-full mb-4"
+                >
+                  <option value="">-- select server --</option>
+                  {servers.map((s) => (
+                    <option key={s.id} value={s.id}>{s.name}</option>
+                  ))}
+                </select>
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    onClick={handleAdd}
+                    className="terminal-button text-xs"
+                    disabled={!selectedServer || adding}
+                  >
+                    {adding ? '[ADDING...]' : '[ADD]'}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => { setAddBotId(null); setSelectedServer(''); }}
+                    className="text-gb-fg-f hover:text-gb-aqua font-mono text-xs"
+                  >
+                    [CANCEL]
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Footer */}
+          <div className="mt-6 pt-4 border-t border-gb-bg-t flex justify-between">
+            <Link to="/" className="text-gb-fg-f hover:text-gb-aqua font-mono text-sm">
+              {'<'} [BACK TO CHAT]
+            </Link>
+            <Link to="/bots/manage" className="text-gb-fg-f hover:text-gb-aqua font-mono text-sm">
+              [MY BOTS]
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StoreBotCard({ bot, isOwner, onAdd }: { bot: StoreBot; isOwner: boolean; onAdd: () => void }) {
+  return (
+    <div className="border border-gb-bg-t p-4">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          <p className="text-gb-green font-mono text-sm">
+            {bot.avatar && (
+              <img
+                src={bot.avatar}
+                alt=""
+                className="inline w-5 h-5 mr-1 align-middle border border-gb-bg-t"
+              />
+            )}
+            [{bot.name}]
+            {isOwner && (
+              <span className="text-gb-fg-f text-xs ml-2">(yours)</span>
+            )}
+          </p>
+          {bot.description && (
+            <p className="text-gb-fg-f font-mono text-xs mt-1">{bot.description}</p>
+          )}
+        </div>
+        <div className="text-right shrink-0">
+          <p className="text-gb-aqua font-mono text-xs">
+            {bot.server_count} {bot.server_count === 1 ? 'server' : 'servers'}
+          </p>
+        </div>
+      </div>
+      <div className="mt-3 flex gap-2">
+        <button
+          type="button"
+          onClick={onAdd}
+          className="terminal-button text-xs"
+        >
+          [ADD TO SERVER]
+        </button>
+      </div>
+    </div>
+  );
+}
@@ -216,12 +216,14 @@ const MessageItem = memo(({
      )}
      <span className="text-gb-fg-f">{formatTime(message.created_at)}</span>{' '}
      {message.pinned && <span className="text-gb-orange font-bold mr-1">[PIN]</span>}
-      <span className="text-gb-aqua hover:text-gb-orange cursor-pointer" onClick={(e) => {
+      <span className={`${message.author_bot ? 'text-gb-green' : 'text-gb-aqua'} hover:text-gb-orange cursor-pointer`} onClick={(e) => {
        e.stopPropagation();
-        onAuthorClick(message.author_id);
+        if (!message.author_bot) onAuthorClick(message.author_id);
      }}>
-        &lt;{members.find((m) => m.id === message.author_id)?.nickname || message.author_username}&gt;
-      </span>{" "}
+        &lt;{message.author_bot ? (message.bot_name || message.author_username) : (members.find((m) => m.id === message.author_id)?.nickname || message.author_username)}&gt;
+      </span>
+      {message.author_bot && <span className="text-gb-bg bg-gb-green px-0.5 font-mono text-[10px] ml-0.5 align-middle">BOT</span>}
+      {" "}
      <span className="text-gb-fg">{renderContent(message.content, memberUsernames)}</span>
      {renderEmbeds(message.embeds)}
      {message.poll && <PollDisplay poll={message.poll} channelId={message.channel_id} />}
@@ -18,12 +18,24 @@ export interface SlashCommand {
  description: string;
 }

+export interface StoreBot {
+  id: string;
+  name: string;
+  avatar: string | null;
+  description: string;
+  server_count: number;
+  owner_id: string;
+  created_at: string;
+}
+
 interface BotState {
  bots: Bot[];
+  storeBots: StoreBot[];
  loading: boolean;
  error: string | null;

  fetchBots: () => Promise<void>;
+  fetchStoreBots: () => Promise<void>;
  createBot: (name: string, description: string) => Promise<Bot & { token: string }>;
  updateBot: (id: string, data: { name?: string; description?: string; avatar?: string }) => Promise<Bot>;
  deleteBot: (id: string) => Promise<void>;
@@ -39,6 +51,7 @@ interface BotState {

 export const useBotStore = create<BotState>((set) => ({
  bots: [],
+  storeBots: [],
  loading: false,
  error: null,

@@ -55,6 +68,19 @@ export const useBotStore = create<BotState>((set) => ({
    }
  },

+  fetchStoreBots: async () => {
+    set({ loading: true, error: null });
+    try {
+      const storeBots = await api.get<StoreBot[]>('/bots/store');
+      set({ storeBots, loading: false });
+    } catch (error) {
+      set({
+        loading: false,
+        error: error instanceof Error ? error.message : 'Failed to fetch bot store',
+      });
+    }
+  },
+
  createBot: async (name, description) => {
    set({ loading: true, error: null });
    try {
@@ -189,7 +215,7 @@ export const useBotStore = create<BotState>((set) => ({

  fetchServerCommands: async (serverId) => {
    try {
-      return await api.get<SlashCommand[]>(`/servers/${serverId}/commands`);
+      return await api.get<SlashCommand[]>(`/bots/servers/${serverId}/commands`);
    } catch (error) {
      set({
        error: error instanceof Error ? error.message : 'Failed to fetch server commands',
@@ -38,6 +38,9 @@ export interface Message {
  author_id: string;
  author_username: string;
  author_display_name: string | null;
+  author_bot?: boolean;
+  bot_id?: string | null;
+  bot_name?: string | null;
  content: string;
  reply_to?: string | null;
  embeds?: MessageEmbed[];
@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/AudioRenderers.tsx","./src/components/BotManager.tsx","./src/components/CalendarView.tsx","./src/components/ChannelList.tsx","./src/components/ChannelSettingsModal.tsx","./src/components/ChatArea.tsx","./src/components/CommandDropdown.tsx","./src/components/CommandManager.tsx","./src/components/ConnectionStatus.tsx","./src/components/ContextMenu.tsx","./src/components/ConversationList.tsx","./src/components/CreateChannelModal.tsx","./src/components/CreateServerModal.tsx","./src/components/DMChat.tsx","./src/components/DeviceSettingsModal.tsx","./src/components/DocsView.tsx","./src/components/EmojiPicker.tsx","./src/components/ExpandableImage.tsx","./src/components/FeatureRequestsPanel.tsx","./src/components/ForgotPasswordPage.tsx","./src/components/FormatToolbar.tsx","./src/components/ForumView.tsx","./src/components/GiphyPicker.tsx","./src/components/InstallBanner.tsx","./src/components/InstallPrompt.tsx","./src/components/InviteModal.tsx","./src/components/JoinServer.tsx","./src/components/JoinServerModal.tsx","./src/components/Layout.tsx","./src/components/ListView.tsx","./src/components/LoginForm.tsx","./src/components/MemberContextMenu.tsx","./src/components/MemberList.tsx","./src/components/MemberRoleAssign.tsx","./src/components/MentionDropdown.tsx","./src/components/MentionPopup.tsx","./src/components/MessageInput.tsx","./src/components/MessageSearch.tsx","./src/components/MobileDrawer.tsx","./src/components/MobileNav.tsx","./src/components/NewConversationModal.tsx","./src/components/NotificationPrompt.tsx","./src/components/PinnedMessages.tsx","./src/components/Poll.tsx","./src/components/ReactionBar.tsx","./src/components/ReplyBar.tsx","./src/components/ResetPasswordPage.tsx","./src/components/RoleManager.tsx","./src/components/ServerBar.tsx","./src/components/ServerSettingsModal.tsx","./src/components/SlashCommandPopup.tsx","./src/components/ThemeToggle.tsx","./src/components/ThreadListPanel.tsx","./src/components/ThreadPanel.tsx","./src/components/TypingIndicator.tsx","./src/components/UserProfileModal.tsx","./src/components/UserSettings.tsx","./src/components/VideoGrid.tsx","./src/components/VoiceChannel.tsx","./src/components/VoiceControls.tsx","./src/components/VoicePanel.tsx","./src/lib/api.ts","./src/lib/kaomojiData.ts","./src/lib/slashCommands.ts","./src/lib/usePermissions.ts","./src/stores/auth.ts","./src/stores/bot.ts","./src/stores/channel.ts","./src/stores/conversation.ts","./src/stores/featureRequest.ts","./src/stores/layout.ts","./src/stores/member.ts","./src/stores/message.ts","./src/stores/moderation.ts","./src/stores/notificationSettings.ts","./src/stores/permissions.ts","./src/stores/presence.ts","./src/stores/push.ts","./src/stores/readStates.ts","./src/stores/role.ts","./src/stores/server.ts","./src/stores/thread.ts","./src/stores/typing.ts","./src/stores/voice.ts","./src/stores/voicePresence.ts","./src/stores/ws.ts"],"version":"5.9.3"}
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/AudioRenderers.tsx","./src/components/BotManager.tsx","./src/components/BotStore.tsx","./src/components/CalendarView.tsx","./src/components/ChannelList.tsx","./src/components/ChannelSettingsModal.tsx","./src/components/ChatArea.tsx","./src/components/CommandDropdown.tsx","./src/components/CommandManager.tsx","./src/components/ConnectionStatus.tsx","./src/components/ContextMenu.tsx","./src/components/ConversationList.tsx","./src/components/CreateChannelModal.tsx","./src/components/CreateServerModal.tsx","./src/components/DMChat.tsx","./src/components/DeviceSettingsModal.tsx","./src/components/DocsView.tsx","./src/components/EmojiPicker.tsx","./src/components/ExpandableImage.tsx","./src/components/FeatureRequestsPanel.tsx","./src/components/ForgotPasswordPage.tsx","./src/components/FormatToolbar.tsx","./src/components/ForumView.tsx","./src/components/GiphyPicker.tsx","./src/components/InstallBanner.tsx","./src/components/InstallPrompt.tsx","./src/components/InviteModal.tsx","./src/components/JoinServer.tsx","./src/components/JoinServerModal.tsx","./src/components/Layout.tsx","./src/components/ListView.tsx","./src/components/LoginForm.tsx","./src/components/MemberContextMenu.tsx","./src/components/MemberList.tsx","./src/components/MemberRoleAssign.tsx","./src/components/MentionDropdown.tsx","./src/components/MentionPopup.tsx","./src/components/MessageInput.tsx","./src/components/MessageSearch.tsx","./src/components/MobileDrawer.tsx","./src/components/MobileNav.tsx","./src/components/NewConversationModal.tsx","./src/components/NotificationPrompt.tsx","./src/components/PinnedMessages.tsx","./src/components/Poll.tsx","./src/components/ReactionBar.tsx","./src/components/ReplyBar.tsx","./src/components/ResetPasswordPage.tsx","./src/components/RoleManager.tsx","./src/components/ServerBar.tsx","./src/components/ServerSettingsModal.tsx","./src/components/SlashCommandPopup.tsx","./src/components/ThemeToggle.tsx","./src/components/ThreadListPanel.tsx","./src/components/ThreadPanel.tsx","./src/components/TypingIndicator.tsx","./src/components/UserProfileModal.tsx","./src/components/UserSettings.tsx","./src/components/VideoGrid.tsx","./src/components/VoiceChannel.tsx","./src/components/VoiceControls.tsx","./src/components/VoicePanel.tsx","./src/lib/api.ts","./src/lib/kaomojiData.ts","./src/lib/slashCommands.ts","./src/lib/usePermissions.ts","./src/stores/auth.ts","./src/stores/bot.ts","./src/stores/channel.ts","./src/stores/conversation.ts","./src/stores/featureRequest.ts","./src/stores/layout.ts","./src/stores/member.ts","./src/stores/message.ts","./src/stores/moderation.ts","./src/stores/notificationSettings.ts","./src/stores/permissions.ts","./src/stores/presence.ts","./src/stores/push.ts","./src/stores/readStates.ts","./src/stores/role.ts","./src/stores/server.ts","./src/stores/thread.ts","./src/stores/typing.ts","./src/stores/voice.ts","./src/stores/voicePresence.ts","./src/stores/ws.ts"],"version":"5.9.3"}