feat(bots): type command arguments inline in the composer

.dockerignore

@@ -1 +1,3 @@
 ./src-tauri/target/*
+node_modules
+dist

Dockerfile

@@ -38,6 +38,8 @@ RUN npm run build
 
 FROM nginx:alpine
 COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
+COPY docker/pwa /etc/obby/pwa
+COPY --chmod=755 docker/40-obby-config.sh /docker-entrypoint.d/
 COPY --from=builder /app/dist /usr/share/nginx/html
 EXPOSE 80
 

docker/40-obby-config.sh

@@ -0,0 +1,46 @@
+#!/bin/sh
+# Writes the network settings from the container environment into the page,
+# so one image serves any network. Unset variables keep the build-time values.
+set -eu
+
+html=/usr/share/nginx/html
+templates=/etc/obby/pwa
+
+json_escape() {
+  printf '%s' "$1" | sed 's/\\/\\\\/g; s/"/\\"/g'
+}
+
+entries=""
+for key in \
+  VITE_DEFAULT_IRC_SERVER VITE_DEFAULT_IRC_SERVER_NAME VITE_DEFAULT_IRC_CHANNELS \
+  VITE_HIDE_SERVER_LIST VITE_DEFAULT_OAUTH_PROVIDER_LABEL VITE_DEFAULT_OAUTH_ISSUER \
+  VITE_DEFAULT_OAUTH_CLIENT_ID VITE_DEFAULT_OAUTH_SCOPES VITE_DEFAULT_OAUTH_REDIRECT_URI \
+  VITE_DEFAULT_OAUTH_TOKEN_KIND VITE_DEFAULT_OAUTH_SERVER_PROVIDER \
+  VITE_DEFAULT_OAUTH_AUTHORIZE_URL VITE_DEFAULT_OAUTH_TOKEN_URL; do
+  eval "value=\${$key-}"
+  [ -n "$value" ] || continue
+  case "$key" in
+    VITE_HIDE_SERVER_LIST)
+      [ "$value" = "true" ] && json=true || json=false ;;
+    VITE_DEFAULT_IRC_CHANNELS)
+      json="[$(json_escape "$value" | tr -d "'" | sed 's/ *, */","/g; s/^ */"/; s/ *$/"/')]" ;;
+    *)
+      json="\"$(json_escape "$value")\"" ;;
+  esac
+  entries="$entries\"$key\":$json,"
+done
+printf 'globalThis.__OBBY_CONFIG__ = {%s};\n' "${entries%,}" > "$html/config.js"
+
+if [ "${VITE_HIDE_SERVER_LIST-}" = "true" ] && ! grep -q 'rel="manifest"' "$html/index.html"; then
+  name="${VITE_DEFAULT_IRC_SERVER_NAME:-Obby}"
+  short=$(printf '%s' "$name" | cut -c1-12)
+  json_name=$(json_escape "$name" | sed 's/[&|]/\\&/g')
+  json_short=$(json_escape "$short" | sed 's/[&|]/\\&/g')
+  html_short=$(printf '%s' "$short" | sed 's/"/\"/g; s/[&|]/\\&/g')
+  sed "s|__NETWORK_NAME__|$json_name|g; s|__SHORT_NAME__|$json_short|g" \
+    "$templates/manifest.webmanifest" > "$html/manifest.webmanifest"
+  sed "s|__SHORT_NAME__|$html_short|g" "$templates/head.html" > /tmp/obby-head.html
+  awk '/<\/head>/ { while ((getline line < "/tmp/obby-head.html") > 0) print line } { print }' \
+    "$html/index.html" > /tmp/obby-index.html
+  cat /tmp/obby-index.html > "$html/index.html"
+fi

docker/nginx.conf

@@ -8,6 +8,11 @@ server {
         try_files $uri $uri/ /index.html;
     }
 
+    location = /config.js {
+        root /usr/share/nginx/html;
+        add_header Cache-Control "no-cache";
+    }
+
     # Cache static assets
     location /assets {
         root /usr/share/nginx/html;

docker/pwa/head.html

@@ -0,0 +1,6 @@
+  <link rel="manifest" href="/manifest.webmanifest" />
+  <link rel="apple-touch-icon" href="/pwa/icon-192.png" />
+  <meta name="apple-mobile-web-app-title" content="__SHORT_NAME__" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <meta name="mobile-web-app-capable" content="yes" />

docker/pwa/manifest.webmanifest

@@ -0,0 +1,31 @@
+{
+  "name": "__NETWORK_NAME__",
+  "short_name": "__SHORT_NAME__",
+  "description": "__NETWORK_NAME__ chat",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "any",
+  "theme_color": "#202225",
+  "background_color": "#202225",
+  "icons": [
+    {
+      "src": "/pwa/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/pwa/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/pwa/icon-512-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

index.html

@@ -10,6 +10,7 @@
 
 <body>
   <div id="root"></div>
+  <script src="/config.js"></script>
   <script type="module" src="./src/main.tsx"></script>
 </body>
 

public/config.js

@@ -0,0 +1 @@
+globalThis.__OBBY_CONFIG__ = {};

src/components/chat/CommandArgHint.tsx

@@ -0,0 +1,53 @@
+import { useLingui } from "@lingui/react/macro";
+import type React from "react";
+import { useIsTouchInput } from "../../hooks/useIsTouchInput";
+import type { CommandArgError } from "../../lib/commandInvocation";
+import type { BotCommandOption } from "../../types";
+import { CloseButton } from "../ui/CloseButton";
+
+export const COMMAND_DETAIL_ID = "command-args-detail";
+
+export const CommandArgHint: React.FC<{
+  param: BotCommandOption;
+  fallback?: string;
+  error?: CommandArgError;
+  onCancel: () => void;
+  ref?: React.Ref<HTMLDivElement>;
+}> = ({ param, fallback, error, onCancel, ref }) => {
+  const { t } = useLingui();
+  const isTouch = useIsTouchInput();
+  const errorText = (e: CommandArgError) => {
+    if (e.kind === "required") return t`Fill in ${e.name}`;
+    if (e.kind === "int") return t`Enter a whole number for ${e.name}`;
+    return t`Enter a number for ${e.name}`;
+  };
+  const detail = error ? errorText(error) : (param.description ?? fallback);
+
+  return (
+    <div
+      ref={ref}
+      className="flex min-w-0 items-center rounded-t-lg border-b border-white/[0.06] bg-discord-dark-100 px-3 text-xs"
+    >
+      <span
+        id={COMMAND_DETAIL_ID}
+        aria-live="polite"
+        className="min-w-0 flex-1 break-words py-1"
+      >
+        <span className="mr-2 font-semibold text-discord-text-normal">
+          {param.name}
+        </span>
+        {!param.required && (
+          <span className="mr-2 rounded border border-dashed border-white/25 px-1 text-discord-text-muted">
+            {t`optional`}
+          </span>
+        )}
+        <span
+          className={error ? "text-discord-red" : "text-discord-text-muted"}
+        >
+          {detail}
+        </span>
+      </span>
+      {isTouch && <CloseButton label={t`Cancel command`} onClick={onCancel} />}
+    </div>
+  );
+};

src/components/chat/CommandChip.tsx

@@ -0,0 +1,37 @@
+import type React from "react";
+import { useIsTouchInput } from "../../hooks/useIsTouchInput";
+import { keepInputFocus } from "../../lib/focus";
+
+export const CommandChip: React.FC<{ name: string }> = ({ name }) => (
+  <span className="mr-1 flex h-[52px] shrink-0 items-center">
+    <span className="rounded bg-discord-primary/25 px-2 py-0.5 font-mono text-sm text-discord-text-link">
+      /{name}
+    </span>
+  </span>
+);
+
+export const CommandArgPill: React.FC<{
+  label: string;
+  value: string;
+  optional: boolean;
+  order: number;
+  onSelect: () => void;
+}> = ({ label, value, optional, order, onSelect }) => {
+  const isTouch = useIsTouchInput();
+  const tone = value
+    ? "border-transparent text-discord-text-normal"
+    : optional
+      ? "border-dashed border-white/25 text-discord-text-muted"
+      : "border-transparent text-discord-text-muted";
+  return (
+    <button
+      type="button"
+      style={{ order }}
+      onMouseDown={keepInputFocus}
+      onClick={onSelect}
+      className={`mr-1 max-w-full whitespace-pre-wrap break-words rounded border bg-white/[0.06] px-1.5 text-left leading-[22px] hover:bg-white/10 ${isTouch ? "my-1 min-h-11 min-w-11 py-[11px]" : "my-[11px] py-1"} ${tone}`}
+    >
+      {value || label}
+    </button>
+  );
+};

src/components/chat/completionProviders.tsx

@@ -2,6 +2,7 @@ import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { useEffect, useMemo, useState } from "react";
 import type { CompletionProvider } from "../../hooks/useCompletion";
+import { botPriority } from "../../lib/botPriority";
 import { getClientCommands } from "../../lib/clientCommands";
 import type { ResolvedShortcode } from "../../lib/customEmoji";
 import type { BotCommandOption, Channel, Server, User } from "../../types";
@@ -194,6 +195,29 @@ export function getActiveSlashQuery(
   return beforeCursor.slice(1).toLowerCase();
 }
 
+// `/name ` or `/name@bot ` with the caret after the space names the bot
+// command the user wants to fill in. A bare name goes to the first bot listed,
+// since slashSuggestions lists bots in the order they answer.
+export function typedBotCommand(
+  inputValue: string,
+  cursorPosition: number,
+  suggestions: readonly SlashSuggestion[],
+): (SlashSuggestion & { source: { kind: "bot" } }) | null {
+  const match = /^\/([^\s/@]+)(?:@(\S+))? $/.exec(inputValue);
+  if (!match || cursorPosition !== inputValue.length) return null;
+  const name = match[1].toLowerCase();
+  const bot = match[2]?.toLowerCase();
+  const named = suggestions.filter((s) => s.name.toLowerCase() === name);
+  if (named.some((s) => s.source.kind === "client")) return null;
+  if (!bot && named.some((s) => s.source.kind === "server")) return null;
+  const bots = named.filter(
+    (s): s is SlashSuggestion & { source: { kind: "bot" } } =>
+      s.source.kind === "bot" &&
+      (!bot || s.source.botNick.toLowerCase() === bot),
+  );
+  return bots[0] ?? null;
+}
+
 function formatOptions(options: BotCommandOption[] | undefined): string {
   if (!options || options.length === 0) return "";
   return options
@@ -224,9 +248,9 @@ function sourceLabel(source: SlashSuggestionSource): {
   }
 }
 
-// Client commands come first because they own their names, then bot schemas,
-// then the server's cmdslist minus anything already listed. Two bots may both
-// offer a name, and we list both so the pick fills `/cmd@bot` unambiguously.
+// Client commands come first because they own their names, then the server's
+// cmdslist, then bot schemas by botPriority. A bare `/cmd` runs the first of
+// these, so a bot behind it is picked as `/cmd@bot`.
 export function slashSuggestions(
   server: Server | undefined,
   channel: Channel | undefined,
@@ -245,11 +269,20 @@ export function slashSuggestions(
     seen.add(c.name.toLowerCase());
   }
 
+  for (const name of server?.cmdsAvailable ?? []) {
+    if (seen.has(name.toLowerCase())) continue;
+    suggestions.push({ name, source: { kind: "server" } });
+  }
+
   if (server?.botCommands) {
     const channelNicks = new Set(
       channel?.users.map((u) => u.username.toLowerCase()) ?? [],
     );
-    for (const [botNick, list] of Object.entries(server.botCommands)) {
+    const byPriority = Object.entries(server.botCommands).sort(
+      ([a], [b]) =>
+        botPriority(server.bots?.[a]) - botPriority(server.bots?.[b]),
+    );
+    for (const [botNick, list] of byPriority) {
       const scope = server.bots?.[botNick]?.scope ?? "channel";
       if (scope === "channel" && !channelNicks.has(botNick.toLowerCase()))
         continue;
@@ -260,21 +293,12 @@ export function slashSuggestions(
           options: c.options,
           source: { kind: "bot", botNick, scope },
         });
-        seen.add(c.name.toLowerCase());
       }
     }
   }
-
-  for (const name of server?.cmdsAvailable ?? []) {
-    if (seen.has(name.toLowerCase())) continue;
-    suggestions.push({ name, source: { kind: "server" } });
-    seen.add(name.toLowerCase());
-  }
   return suggestions;
 }
 
-// A bot command that declares options goes to `onPickWithOptions` so its
-// values are entered through typed form fields.
 export function slashProvider(
   commands: readonly SlashSuggestion[],
   onPickWithOptions: (suggestion: SlashSuggestion) => void,
@@ -307,7 +331,11 @@ export function slashProvider(
               </span>
             )}
             <span
-              className="row-meta ml-auto shrink-0 [[data-compact]_&]:order-last"
+              className={`ml-auto shrink-0 [[data-compact]_&]:order-last ${
+                cmd.source.kind === "server"
+                  ? "rounded px-1.5 text-[11px] font-semibold uppercase bg-discord-primary text-white"
+                  : "row-meta"
+              }`}
               title={source.title}
             >
               {source.label}