experimental-a2 0.20.0 → 0.22.0

package/examples/playground/app/a2slack/ui/MessageRow.tsx

@@ -0,0 +1,314 @@
+'use client'
+import { useRef, useState, type ReactNode } from 'react'
+import { Ellipsis, MessageSquare, SmilePlus } from 'lucide-react'
+import { BOT, type ChatMessage } from '@/app/a2slack/model'
+import { useIdentity } from '../identity'
+import { useWorkspace } from '../sessions'
+import {
+  ContextMenuArea,
+  Menu,
+  MenuEmojiRow,
+  MenuItem,
+  MenuSeparator,
+} from './Menu'
+
+export const EMOJIS = [
+  '👍',
+  '❤️',
+  '😂',
+  '🎉',
+  '😮',
+  '😢',
+  '👀',
+  '✅',
+  '🔥',
+  '💯',
+  '🙏',
+  '👎',
+] as const
+
+const timeOf = (at: string): string =>
+  new Date(at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+
+function Reactions({ message }: { message: ChatMessage }): ReactNode {
+  const identity = useIdentity()
+  const { push } = useWorkspace()
+  if (message.reactions.length === 0) return null
+
+  const toggle = (emoji: string): void => {
+    if (!identity) return
+    const mine = message.reactions
+      .find((r) => r.emoji === emoji)
+      ?.by.some((a) => a.id === identity.id)
+    push({
+      type: mine ? 'reaction.removed' : 'reaction.added',
+      payload: {
+        channel: message.channel,
+        messageId: message.id,
+        emoji,
+        by: identity,
+      },
+    }).catch(() => {})
+  }
+
+  return (
+    <div className="a2slack-reactions">
+      {message.reactions.map((reaction) => {
+        const mine = reaction.by.some((a) => a.id === identity?.id)
+        return (
+          <button
+            key={reaction.emoji}
+            className="a2slack-chip"
+            data-mine={mine || undefined}
+            title={reaction.by.map((a) => a.name).join(', ')}
+            onClick={() => toggle(reaction.emoji)}
+          >
+            <span>{reaction.emoji}</span>
+            <span>{reaction.by.length}</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+function Editor({
+  message,
+  onDone,
+}: {
+  message: ChatMessage
+  onDone: () => void
+}): ReactNode {
+  const identity = useIdentity()
+  const { push } = useWorkspace()
+  const [text, setText] = useState(message.text)
+
+  const save = (): void => {
+    const trimmed = text.trim()
+    if (identity && trimmed && trimmed !== message.text) {
+      push({
+        type: 'message.edited',
+        payload: {
+          channel: message.channel,
+          messageId: message.id,
+          text: trimmed,
+          by: identity,
+        },
+      }).catch(() => {})
+    }
+    onDone()
+  }
+
+  return (
+    <div className="a2slack-edit-box">
+      <textarea
+        className="a2slack-edit-area"
+        autoFocus
+        rows={Math.min(6, text.split('\n').length)}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault()
+            save()
+          }
+          if (e.key === 'Escape') onDone()
+        }}
+      />
+      <span className="a2slack-edit-hint">enter to save · esc to cancel</span>
+    </div>
+  )
+}
+
+export function MessageRow({
+  message,
+  grouped,
+  inThread = false,
+  onOpenThread,
+}: {
+  message: ChatMessage
+  grouped: boolean
+  inThread?: boolean
+  onOpenThread?: (rootId: string) => void
+}): ReactNode {
+  const identity = useIdentity()
+  const { push } = useWorkspace()
+  const row = useRef<HTMLDivElement>(null)
+  const [hovered, setHovered] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [editing, setEditing] = useState(false)
+
+  // A menu's popup sits outside the row, so the pointer can leave the row
+  // over it without a mouseleave. When a menu closes, ask the row itself.
+  const onMenuOpenChange = (open: boolean): void => {
+    setMenuOpen(open)
+    if (!open) setHovered(row.current?.matches(':hover') ?? false)
+  }
+
+  const mine = identity !== null && identity.id === message.author.id
+  const showActions = !editing && !message.deleted && (hovered || menuOpen)
+
+  const react = (emoji: string): void => {
+    if (!identity) return
+    const already = message.reactions
+      .find((r) => r.emoji === emoji)
+      ?.by.some((a) => a.id === identity.id)
+    push({
+      type: already ? 'reaction.removed' : 'reaction.added',
+      payload: {
+        channel: message.channel,
+        messageId: message.id,
+        emoji,
+        by: identity,
+      },
+    }).catch(() => {})
+  }
+
+  const remove = (): void => {
+    if (!identity) return
+    push({
+      type: 'message.deleted',
+      payload: {
+        channel: message.channel,
+        messageId: message.id,
+        by: identity,
+      },
+    }).catch(() => {})
+  }
+
+  const menuItems = (
+    <>
+      <MenuEmojiRow emojis={EMOJIS.slice(0, 6)} onPick={react} />
+      <MenuSeparator />
+      {!inThread && onOpenThread && (
+        <MenuItem onClick={() => onOpenThread(message.id)}>
+          reply in thread
+        </MenuItem>
+      )}
+      <MenuItem
+        onClick={() => {
+          navigator.clipboard.writeText(message.text).catch(() => {})
+        }}
+      >
+        copy text
+      </MenuItem>
+      {mine && (
+        <>
+          <MenuSeparator />
+          <MenuItem onClick={() => setEditing(true)}>edit message</MenuItem>
+          <MenuItem danger onClick={remove}>
+            delete message
+          </MenuItem>
+        </>
+      )}
+    </>
+  )
+
+  // What triage called a top-level message: beside the author and time,
+  // or after the text when the row is grouped under the one before it.
+  const badge = message.threadId === undefined &&
+    message.label !== undefined &&
+    !message.deleted && <span className="a2slack-badge">{message.label}</span>
+
+  const body = message.deleted ? (
+    <p className="a2slack-tombstone">message removed</p>
+  ) : editing ? (
+    <Editor message={message} onDone={() => setEditing(false)} />
+  ) : (
+    <p className="a2slack-text">
+      {message.text}
+      {message.editedAt !== undefined && (
+        <span className="a2slack-edited">(edited)</span>
+      )}
+      {grouped && badge}
+    </p>
+  )
+
+  return (
+    <ContextMenuArea menu={menuItems} onOpenChange={onMenuOpenChange}>
+      <div
+        ref={row}
+        className="a2slack-row"
+        data-thread={inThread || undefined}
+        data-spaced={!grouped || undefined}
+        data-hover={((hovered || menuOpen) && !editing) || undefined}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      >
+        {!grouped && (
+          <div className="a2slack-meta">
+            <span className="a2slack-author">{message.author.name}</span>
+            {message.author.id === BOT.id && (
+              <span className="a2slack-badge">bot</span>
+            )}
+            <span className="a2slack-time">{timeOf(message.at)}</span>
+            {badge}
+          </div>
+        )}
+        {grouped && hovered && !inThread && (
+          <span className="a2slack-gutter-time">{timeOf(message.at)}</span>
+        )}
+        {body}
+        <Reactions message={message} />
+        {!inThread && message.replyCount > 0 && onOpenThread && (
+          <button
+            className="a2slack-thread-pill"
+            onClick={() => onOpenThread(message.id)}
+          >
+            <span>
+              {message.replyCount}{' '}
+              {message.replyCount === 1 ? 'reply' : 'replies'} →
+            </span>
+            {message.lastReplyAt !== undefined && (
+              <span className="a2slack-thread-pill-time">
+                last {timeOf(message.lastReplyAt)}
+              </span>
+            )}
+          </button>
+        )}
+        {showActions && (
+          <div className="a2slack-actions" data-thread={inThread || undefined}>
+            <button
+              className="a2slack-action-button a2slack-quick-emoji"
+              title="react 👍"
+              onClick={() => react('👍')}
+            >
+              👍
+            </button>
+            <Menu
+              trigger={
+                <SmilePlus
+                  size={15}
+                  strokeWidth={1.75}
+                  aria-label="add reaction"
+                />
+              }
+              triggerClassName="a2slack-action-button"
+              onOpenChange={onMenuOpenChange}
+            >
+              <MenuEmojiRow emojis={EMOJIS} onPick={react} />
+            </Menu>
+            {!inThread && onOpenThread && (
+              <button
+                className="a2slack-action-button"
+                title="reply in thread"
+                onClick={() => onOpenThread(message.id)}
+              >
+                <MessageSquare size={15} strokeWidth={1.75} />
+              </button>
+            )}
+            <Menu
+              trigger={
+                <Ellipsis size={15} strokeWidth={1.75} aria-label="more" />
+              }
+              triggerClassName="a2slack-action-button"
+              onOpenChange={onMenuOpenChange}
+            >
+              {menuItems}
+            </Menu>
+          </div>
+        )}
+      </div>
+    </ContextMenuArea>
+  )
+}

package/examples/playground/app/a2slack/ui/NameGate.tsx

@@ -0,0 +1,35 @@
+'use client'
+import { useState, type ReactNode } from 'react'
+import { saveIdentity } from '../identity'
+import { DotsShadow } from './DotsShadow'
+
+export function NameGate(): ReactNode {
+  const [name, setName] = useState('')
+
+  return (
+    <div className="a2slack-gate">
+      <div className="a2slack-gate-wrapper">
+        <form
+          className="a2slack-gate-box"
+          onSubmit={(e) => {
+            e.preventDefault()
+            if (name.trim()) saveIdentity(name)
+          }}
+        >
+          <p className="a2slack-gate-title">a2slack</p>
+          <p className="a2slack-gate-label">what should we call you?</p>
+          <input
+            className="a2slack-gate-input"
+            autoFocus
+            maxLength={32}
+            placeholder="your name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+          <p className="a2slack-gate-hint">⏎ to join</p>
+        </form>
+        <DotsShadow />
+      </div>
+    </div>
+  )
+}

package/examples/playground/app/a2slack/ui/SearchContext.tsx

@@ -0,0 +1,146 @@
+/**
+ * The search box's state, shared by the sidebar (where you type) and the
+ * main column (where the results show). Typing searches once it settles;
+ * Enter searches now. Results answer `GET /a2slack/search?q=`, which reads
+ * the messages table.
+ */
+'use client'
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+  type RefObject,
+} from 'react'
+import type { SearchResult } from '@/app/a2slack/model'
+
+const SETTLE_MS = 250
+
+type Request = { q: string; n: number }
+
+type Outcome = Request & { results: SearchResult[]; error: string | null }
+
+export type Search = {
+  /** What's in the box. Results show while it has text. */
+  query: string
+  setQuery: (text: string) => void
+  /** Searches for the box's text now, without waiting for it to settle. */
+  submit: () => void
+  /** Empties the box, which closes the results. */
+  clear: () => void
+  /** The latest answer, and the query it answers. */
+  outcome: Outcome | null
+  /** A search for the box's text hasn't answered yet. */
+  loading: boolean
+  input: RefObject<HTMLInputElement | null>
+}
+
+const SearchContext = createContext<Search | null>(null)
+
+export function useSearch(): Search {
+  const search = useContext(SearchContext)
+  if (search === null) throw new Error('useSearch needs a SearchProvider')
+  return search
+}
+
+async function fetchResults(
+  q: string,
+  signal: AbortSignal,
+): Promise<{ results: SearchResult[]; error: string | null }> {
+  const response = await fetch(`/a2slack/search?q=${encodeURIComponent(q)}`, {
+    signal,
+  })
+  const body = (await response.json().catch(() => ({}))) as {
+    results?: SearchResult[]
+    error?: string
+  }
+  if (response.ok && body.results !== undefined) {
+    return { results: body.results, error: null }
+  }
+  return {
+    results: [],
+    error: body.error ?? `search failed (${response.status})`,
+  }
+}
+
+export function SearchProvider({
+  children,
+}: {
+  children: ReactNode
+}): ReactNode {
+  const [query, setQueryText] = useState('')
+  const [request, setRequest] = useState<Request | null>(null)
+  const [outcome, setOutcome] = useState<Outcome | null>(null)
+  const input = useRef<HTMLInputElement>(null)
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const sent = useRef(0)
+
+  useEffect(() => () => clearTimeout(timer.current), [])
+
+  useEffect(() => {
+    if (request === null) return
+    const controller = new AbortController()
+    fetchResults(request.q, controller.signal)
+      .then((answer) => setOutcome({ ...request, ...answer }))
+      .catch(() => {
+        if (controller.signal.aborted) return
+        setOutcome({ ...request, results: [], error: "search didn't answer" })
+      })
+    return () => controller.abort()
+  }, [request])
+
+  const send = (q: string): void => {
+    clearTimeout(timer.current)
+    sent.current += 1
+    setRequest({ q, n: sent.current })
+  }
+
+  const setQuery = (text: string): void => {
+    setQueryText(text)
+    clearTimeout(timer.current)
+    const q = text.trim()
+    if (q === '') {
+      setRequest(null)
+      setOutcome(null)
+      return
+    }
+    if (q === request?.q) return
+    timer.current = setTimeout(() => send(q), SETTLE_MS)
+  }
+
+  const submit = (): void => {
+    const q = query.trim()
+    if (q !== '') send(q)
+  }
+
+  const clear = (): void => {
+    clearTimeout(timer.current)
+    setQueryText('')
+    setRequest(null)
+    setOutcome(null)
+  }
+
+  const answered =
+    outcome !== null &&
+    request !== null &&
+    outcome.n === request.n &&
+    outcome.q === query.trim()
+
+  return (
+    <SearchContext
+      value={{
+        query,
+        setQuery,
+        submit,
+        clear,
+        outcome,
+        loading: query.trim() !== '' && !answered,
+        input,
+      }}
+    >
+      {children}
+    </SearchContext>
+  )
+}

package/examples/playground/app/a2slack/ui/SearchResults.tsx

@@ -0,0 +1,97 @@
+'use client'
+import type { ReactNode } from 'react'
+import Link from 'next/link'
+import type { SearchResult } from '@/app/a2slack/model'
+import { useSearch } from './SearchContext'
+
+const whenOf = (at: string): string =>
+  new Date(at).toLocaleString([], {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+
+/** A reply opens its thread; a top-level message opens its channel. */
+const hrefOf = (result: SearchResult): string =>
+  result.threadId === undefined
+    ? `/a2slack/c/${result.channel}`
+    : `/a2slack/c/${result.channel}?thread=${encodeURIComponent(result.threadId)}`
+
+/** The text, with each case-insensitive match of `q` marked, as the search's ILIKE matches it. */
+function Highlighted({ text, q }: { text: string; q: string }): ReactNode {
+  if (q === '') return text
+  const pattern = new RegExp(
+    `(${q.replaceAll(/[.*+?^${}()|[\]\\/]/g, '\\$&')})`,
+    'iu',
+  )
+  return text
+    .split(pattern)
+    .map((part, i) => (i % 2 === 1 ? <mark key={i}>{part}</mark> : part))
+}
+
+/** The main column while the search box has text: every match, newest first. */
+export function SearchResults(): ReactNode {
+  const search = useSearch()
+  const query = search.query.trim()
+  if (query === '') return null
+
+  const { outcome, loading } = search
+  const results = outcome?.results ?? []
+  const error = outcome?.error ?? null
+  const status =
+    error !== null && !loading
+      ? 'unavailable'
+      : loading
+        ? 'searching…'
+        : `${results.length} ${results.length === 1 ? 'result' : 'results'}`
+
+  return (
+    <section
+      className="a2slack-results"
+      aria-label="search results"
+      onKeyDown={(e) => {
+        if (e.key !== 'Escape') return
+        search.clear()
+        search.input.current?.focus()
+      }}
+    >
+      <header className="a2slack-header">
+        <span className="a2slack-header-name">search · {query}</span>
+        <span className="a2slack-status" role="status">
+          {status}
+        </span>
+      </header>
+      <div className="a2slack-results-list">
+        {error !== null ? (
+          <p className="a2slack-results-hint">{error}</p>
+        ) : (
+          !loading &&
+          results.length === 0 && (
+            <p className="a2slack-results-hint">no messages match</p>
+          )
+        )}
+        {results.map((result) => (
+          <Link
+            key={result.id}
+            href={hrefOf(result)}
+            className="a2slack-result"
+            onClick={() => search.clear()}
+          >
+            <div className="a2slack-meta">
+              <span className="a2slack-result-channel">#{result.channel}</span>
+              <span className="a2slack-author">{result.author.name}</span>
+              <span className="a2slack-time">{whenOf(result.at)}</span>
+              {result.threadId !== undefined && (
+                <span className="a2slack-time">in a thread</span>
+              )}
+            </div>
+            <p className="a2slack-result-text">
+              <Highlighted text={result.text} q={outcome?.q ?? query} />
+            </p>
+          </Link>
+        ))}
+      </div>
+    </section>
+  )
+}

package/examples/playground/app/a2slack/ui/Shell.tsx

@@ -0,0 +1,34 @@
+'use client'
+import { useEffect, useState, type ReactNode } from 'react'
+import { useIdentity } from '@/app/a2slack/identity'
+import { InboxProvider } from '@/app/a2slack/ui/InboxContext'
+import { InboxView } from '@/app/a2slack/ui/InboxView'
+import { NameGate } from '@/app/a2slack/ui/NameGate'
+import { SearchProvider } from '@/app/a2slack/ui/SearchContext'
+import { SearchResults } from '@/app/a2slack/ui/SearchResults'
+import { Sidebar } from '@/app/a2slack/ui/Sidebar'
+
+export function Shell({ children }: { children: ReactNode }): ReactNode {
+  const identity = useIdentity()
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+
+  // The root layout already renders the page's <main>, so this column is
+  // a div. Search results and the inbox cover it; the channel underneath
+  // stays mounted.
+  return (
+    <SearchProvider>
+      <InboxProvider>
+        <div className="a2slack-shell">
+          <Sidebar />
+          <div className="a2slack-main">
+            {children}
+            <InboxView />
+            <SearchResults />
+          </div>
+          {mounted && !identity && <NameGate />}
+        </div>
+      </InboxProvider>
+    </SearchProvider>
+  )
+}