Discord

2026-02-27 08:27:43 +00:00
parent 7bf55af5b3
commit bc4c20929c
48 changed files with 4344 additions and 275 deletions
@@ -0,0 +1,174 @@
+import { useState, useEffect } from 'react';
+import { toast } from 'sonner';
+import { Copy } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useClient } from 'hooks/useClient';
+
+type DiscordConnection = {
+  linked: boolean;
+  discordId?: string;
+};
+
+type DiscordStatus = {
+  configured: boolean;
+  running: boolean;
+  serverInvite: string | null;
+  botHandle: string | null;
+};
+
+export const DiscordAccount = () => {
+  const client = useClient();
+  const [isLoading, setIsLoading] = useState(true);
+  const [connection, setConnection] = useState<DiscordConnection>({ linked: false });
+  const [botStatus, setBotStatus] = useState<DiscordStatus>({ configured: false, running: false });
+  const [pairingCode, setPairingCode] = useState<string | null>(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  useEffect(() => {
+    Promise.all([
+      client.get<DiscordConnection>('/channels/discord/connection').then(setConnection),
+      client.get<DiscordStatus>('/channels/discord/status').then(setBotStatus),
+    ])
+      .catch(() => {})
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  const handleGenerateCode = async () => {
+    setIsGenerating(true);
+    try {
+      const res = await client.post<{ code: string; expiresIn: number }>('/channels/discord/pair', {});
+      setPairingCode(res.code);
+    } catch {
+      toast.error('Failed to generate pairing code');
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleCopyCode = () => {
+    if (pairingCode) {
+      navigator.clipboard.writeText(pairingCode);
+      toast.success('Code copied to clipboard');
+    }
+  };
+
+  const handleDisconnect = async () => {
+    try {
+      await client.delete('/channels/discord/connection');
+      setConnection({ linked: false });
+      setPairingCode(null);
+      toast.success('Discord account unlinked');
+    } catch {
+      toast.error('Failed to unlink Discord account');
+    }
+  };
+
+  if (isLoading) return null;
+
+  if (!botStatus.configured) {
+    return (
+      <div className="grid gap-4">
+        <p className="text-sm text-duck-dark/60 dark:text-foreground/60">
+          Discord integration has not been configured yet. Ask your administrator to set up the Discord bot in the
+          Enterprise settings.
+        </p>
+      </div>
+    );
+  }
+
+  const connectionInfo = (botStatus.serverInvite || botStatus.botHandle) && (
+    <div className="rounded-lg border border-duck-dark/10 dark:border-foreground/10 p-4 grid gap-2">
+      {botStatus.serverInvite && (
+        <div className="flex items-center gap-2 text-sm">
+          <span className="text-duck-dark/50 dark:text-foreground/50 shrink-0">Server:</span>
+          <a
+            href={botStatus.serverInvite}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-duck-teal underline truncate"
+          >
+            {botStatus.serverInvite}
+          </a>
+        </div>
+      )}
+      {botStatus.botHandle && (
+        <div className="flex items-center gap-2 text-sm">
+          <span className="text-duck-dark/50 dark:text-foreground/50 shrink-0">Bot:</span>
+          <code className="text-xs bg-duck-dark/5 dark:bg-foreground/5 px-2 py-1 rounded">{botStatus.botHandle}</code>
+        </div>
+      )}
+    </div>
+  );
+
+  if (connection.linked) {
+    return (
+      <div className="grid gap-4">
+        <div className="flex items-center gap-3 rounded-lg border border-duck-dark/10 dark:border-foreground/10 p-4">
+          <div className="h-2.5 w-2.5 rounded-full bg-green-500 shrink-0" />
+          <div className="min-w-0 flex-1">
+            <p className="text-sm font-medium text-duck-dark dark:text-foreground">Linked</p>
+            <p className="text-xs text-duck-dark/50 dark:text-foreground/50 truncate">
+              Discord ID: {connection.discordId}
+            </p>
+          </div>
+        </div>
+        {connectionInfo}
+        <p className="text-xs text-duck-dark/40 dark:text-foreground/40">
+          You can send direct messages to the bot on Discord and they will be handled by your PI agent.
+        </p>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={handleDisconnect}
+          className="w-full h-11 cursor-pointer"
+        >
+          Unlink Discord
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-4">
+      <p className="text-sm text-duck-dark/60 dark:text-foreground/60">
+        Link your Discord account to chat with your PI agent via direct messages.
+      </p>
+
+      {connectionInfo}
+
+      {pairingCode ? (
+        <div className="grid gap-3">
+          <div className="flex items-center justify-between rounded-lg border border-duck-dark/10 dark:border-foreground/10 p-4">
+            <code className="text-2xl font-mono font-bold tracking-[0.3em] text-duck-dark dark:text-foreground">
+              {pairingCode}
+            </code>
+            <Button type="button" variant="ghost" size="icon" onClick={handleCopyCode} className="cursor-pointer shrink-0">
+              <Copy className="h-4 w-4" />
+            </Button>
+          </div>
+          <p className="text-xs text-duck-dark/50 dark:text-foreground/50">
+            Send this code as a direct message to the bot on Discord. Expires in 10 minutes.
+          </p>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleGenerateCode}
+            disabled={isGenerating}
+            className="w-full h-11 cursor-pointer"
+          >
+            Generate New Code
+          </Button>
+        </div>
+      ) : (
+        <Button
+          type="button"
+          onClick={handleGenerateCode}
+          disabled={isGenerating}
+          className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer"
+        >
+          {isGenerating ? 'Generating...' : 'Link Discord'}
+        </Button>
+      )}
+    </div>
+  );
+};
@@ -0,0 +1,237 @@
+import { useState, useEffect } from 'react';
+import { toast } from 'sonner';
+import { ChevronDown } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
+import { useClient } from 'hooks/useClient';
+
+type DiscordConfig = {
+  configured: boolean;
+  enabled: boolean;
+  botToken: string | null;
+  serverInvite: string | null;
+  botHandle: string | null;
+};
+
+type DiscordStatus = {
+  configured: boolean;
+  enabled: boolean;
+  running: boolean;
+  botUsername: string | null;
+};
+
+const SetupGuide = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium text-duck-teal cursor-pointer hover:underline w-full">
+        <ChevronDown className={`h-3.5 w-3.5 transition-transform duration-200 ${open ? 'rotate-180' : ''}`} />
+        Step-by-step setup guide
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <ol className="mt-3 grid gap-4 text-sm text-duck-dark/70 dark:text-foreground/70 list-decimal list-outside pl-5">
+          <li>
+            <strong className="text-duck-dark dark:text-foreground">Create a Discord application</strong>
+            <p className="mt-1">
+              Go to the{' '}
+              <a href="https://discord.com/developers/applications" target="_blank" rel="noopener noreferrer" className="text-duck-teal underline">
+                Discord Developer Portal
+              </a>{' '}
+              and click <strong>New Application</strong>.
+            </p>
+            <ul className="mt-1 list-disc list-outside pl-5 grid gap-0.5">
+              <li>Fill in <strong>Name</strong> (e.g. &quot;Officer&quot;), optionally a <strong>Description</strong> and <strong>Tags</strong></li>
+              <li>Leave everything else empty — <strong>Interactions Endpoint URL</strong>, <strong>Linked Roles Verification URL</strong>, and <strong>Terms of Service / Privacy Policy URLs</strong> are not needed</li>
+            </ul>
+            <p className="mt-1">Click <strong>Create</strong>.</p>
+            <p className="mt-2 text-xs text-duck-dark/50 dark:text-foreground/50">
+              You will see an Application ID and Public Key on this page — you can ignore both. Our bot connects via the gateway (WebSocket), not webhooks, so these are not used.
+            </p>
+          </li>
+
+          <li>
+            <strong className="text-duck-dark dark:text-foreground">Go to the Bot page</strong>
+            <p className="mt-1">
+              In the left sidebar, click <strong>Bot</strong>. A bot user is created automatically with your application.
+              You can optionally set a custom username and avatar here — this is what users will see when they DM the bot.
+            </p>
+          </li>
+
+          <li>
+            <strong className="text-duck-dark dark:text-foreground">Enable privileged intents</strong>
+            <p className="mt-1">
+              Still on the <strong>Bot</strong> page, scroll down to <strong>Privileged Gateway Intents</strong> and enable:
+            </p>
+            <ul className="mt-1 list-disc list-outside pl-5 grid gap-0.5">
+              <li><strong>Presence Intent</strong> — shows the bot as online in your server</li>
+              <li><strong>Server Members Intent</strong> — makes the bot visible in the member list so users can find and DM it</li>
+              <li><strong>Message Content Intent</strong> — required to read DM message text</li>
+            </ul>
+            <p className="mt-1">Click <strong>Save Changes</strong>.</p>
+          </li>
+
+          <li>
+            <strong className="text-duck-dark dark:text-foreground">Copy the bot token</strong>
+            <p className="mt-1">
+              On the <strong>Bot</strong> page, click <strong>Reset Token</strong> (or <strong>View Token</strong> if this is a new bot).
+              Copy the token — you will only see it once.
+            </p>
+            <p className="mt-2 text-xs text-duck-dark/50 dark:text-foreground/50">
+              Keep this token secret. Anyone with this token can control your bot. If it leaks, reset it immediately from this page.
+            </p>
+          </li>
+
+          <li>
+            <strong className="text-duck-dark dark:text-foreground">Invite the bot to your server (optional)</strong>
+            <p className="mt-1">
+              Open this URL in your browser, replacing{' '}
+              <code className="text-xs bg-duck-dark/5 dark:bg-foreground/5 px-1.5 py-0.5 rounded">YOUR_APP_ID</code>{' '}
+              with the Application ID from the <strong>General Information</strong> page:
+            </p>
+            <code className="mt-1.5 block text-xs bg-duck-dark/5 dark:bg-foreground/5 px-3 py-2 rounded break-all">
+              https://discord.com/oauth2/authorize?client_id=YOUR_APP_ID&amp;scope=bot&amp;permissions=0
+            </code>
+            <p className="mt-1.5">
+              Select your server and click <strong>Authorize</strong>. No bot permissions are needed — leave them at zero.
+            </p>
+            <p className="mt-2 text-xs text-duck-dark/50 dark:text-foreground/50">
+              Adding the bot to a shared server is optional but has a few advantages:
+            </p>
+            <ul className="mt-1 text-xs text-duck-dark/50 dark:text-foreground/50 list-disc list-outside pl-5 grid gap-0.5">
+              <li>Users can find the bot in the member list and right-click → <strong>Message</strong> to start a DM</li>
+              <li>The bot shows as online in the server, so users can see at a glance whether it&apos;s running</li>
+              <li>Easier onboarding — you can pin the pairing instructions in a channel for your team</li>
+            </ul>
+            <p className="mt-1 text-xs text-duck-dark/50 dark:text-foreground/50">
+              Without a shared server, users can still DM the bot by searching its exact username — but a shared server makes discovery much simpler.
+            </p>
+          </li>
+
+          <li>
+            <strong className="text-duck-dark dark:text-foreground">Paste the token below and save</strong>
+            <p className="mt-1">
+              Paste the bot token into the field below and click <strong>Save</strong>.
+              The bot will come online automatically. Users can then link their Discord accounts from their personal integration settings.
+            </p>
+          </li>
+        </ol>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+export const DiscordBotConfig = () => {
+  const client = useClient();
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [botToken, setBotToken] = useState('');
+  const [serverInvite, setServerInvite] = useState('');
+  const [botHandle, setBotHandle] = useState('');
+  const [status, setStatus] = useState<DiscordStatus | null>(null);
+
+  const fetchStatus = () => {
+    client
+      .get<DiscordStatus>('/channels/discord/status')
+      .then(setStatus)
+      .catch(() => {});
+  };
+
+  useEffect(() => {
+    Promise.all([
+      client.get<DiscordConfig>('/channels/discord/config').then((data) => {
+        if (data.botToken) setBotToken(data.botToken);
+        if (data.serverInvite) setServerInvite(data.serverInvite);
+        if (data.botHandle) setBotHandle(data.botHandle);
+      }),
+      client.get<DiscordStatus>('/channels/discord/status').then(setStatus),
+    ])
+      .catch(() => {})
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  const handleSave = async () => {
+    if (isSaving) return;
+    setIsSaving(true);
+    try {
+      await client.put('/channels/discord/config', {
+        botToken: botToken.trim(),
+        serverInvite: serverInvite.trim() || undefined,
+        botHandle: botHandle.trim() || undefined,
+      });
+      toast.success('Discord bot configuration saved');
+      fetchStatus();
+    } catch {
+      toast.error('Failed to save Discord bot configuration');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (isLoading) return null;
+
+  return (
+    <div className="grid gap-5">
+      {status && (
+        <div className="flex items-center gap-2 rounded-lg border border-duck-dark/10 dark:border-foreground/10 p-3">
+          <div className={`h-2.5 w-2.5 rounded-full shrink-0 ${status.running ? 'bg-green-500' : 'bg-duck-dark/20 dark:bg-foreground/20'}`} />
+          <span className="text-sm text-duck-dark dark:text-foreground">
+            {status.running ? `Online as ${status.botUsername}` : status.configured ? 'Bot configured but not running' : 'Not configured'}
+          </span>
+        </div>
+      )}
+
+      <SetupGuide />
+
+      <div className="border-t border-duck-dark/10 dark:border-foreground/10 pt-5 grid gap-5">
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70 dark:text-foreground/70">Bot Token</span>
+          <Input
+            className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            type="password"
+            value={botToken}
+            onChange={(ev) => setBotToken(ev.target.value)}
+            placeholder="MTIz..."
+          />
+        </Label>
+
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70 dark:text-foreground/70">Server Invite Link</span>
+          <Input
+            className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            value={serverInvite}
+            onChange={(ev) => setServerInvite(ev.target.value)}
+            placeholder="https://discord.gg/..."
+          />
+          <span className="text-xs text-duck-dark/40 dark:text-foreground/40">
+            Shown to users so they can join the server and find the bot.
+          </span>
+        </Label>
+
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70 dark:text-foreground/70">Bot Handle</span>
+          <Input
+            className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            value={botHandle}
+            onChange={(ev) => setBotHandle(ev.target.value)}
+            placeholder="my-bot#1234"
+          />
+          <span className="text-xs text-duck-dark/40 dark:text-foreground/40">
+            The bot&apos;s username#discriminator — shown to users who want to DM the bot directly.
+          </span>
+        </Label>
+
+        <Button
+          type="button"
+          onClick={handleSave}
+          disabled={isSaving || !botToken.trim()}
+          className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+        >
+          {isSaving ? 'Saving...' : 'Save'}
+        </Button>
+      </div>
+    </div>
+  );
+};
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Puzzle, KeyRound, UserCircle } from 'lucide-react';
+import { Puzzle, KeyRound, UserCircle, MessageCircle } from 'lucide-react';
 import type { LayoutNode, PanelComponents } from 'officerdev';
 import { WorkspaceLayout } from 'officerdev';
 import { useAuth } from 'hooks/useAuth';
@@ -9,16 +9,20 @@ import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { SettingsSidebar, SettingsContent, type SettingsSection } from '../SettingsPanel';
 import { GoogleOAuthConfig } from './GoogleOAuthConfig';
 import { GoogleAccount } from './GoogleAccount';
+import { DiscordBotConfig } from './DiscordBotConfig';
+import { DiscordAccount } from './DiscordAccount';

 const GLOBAL_KEY = 'INTEGRATIONS_SETTINGS_SELECTED';
 const TAB_KEY = 'INTEGRATIONS_SETTINGS_TAB';

 const enterpriseSections: SettingsSection[] = [
  { key: 'google-oauth', icon: KeyRound, title: 'Google OAuth', description: 'Client ID and secret for Google APIs', content: <GoogleOAuthConfig /> },
+  { key: 'discord-bot', icon: MessageCircle, title: 'Discord Bot', description: 'Bot token for Discord integration', content: <DiscordBotConfig /> },
 ];

 const personalSections: SettingsSection[] = [
  { key: 'google-account', icon: UserCircle, title: 'Google Account', description: 'Connect your Google account', content: <GoogleAccount /> },
+  { key: 'discord-account', icon: MessageCircle, title: 'Discord', description: 'Link your Discord account', content: <DiscordAccount /> },
 ];

 const IntegrationsSidebar = () => {