Widget: a header menu with New conversation, Download transcript and a privacy link

Fechada
  • Algo errado?
#496 4 comentários 0 reações 1 responsável Ver no GitHub

Mantenedores costumam responder em até 1 dia

@anurag2787 já está trabalhando nisso.

Desde 30/10/2026.

  • #505 de @anurag2787 — aberto

Avaliação

Esta issue ainda não foi avaliada.

Descrição

hacktoberfest

F-05 task 19. The panel header has the name, the subtitle and a close button (packages/widget/src/dom/panel.ts:128-160). Visitors have no way to start over or keep a copy of the chat, though the widget can already do the first one: newConversation() exists (packages/widget/src/widget.ts:455), and so does its string, newConversation: 'New conversation' (packages/widget/src/i18n.ts:62), which nothing uses yet.

What to do

  • Add a "More options" button (a ⋯ icon in packages/widget/src/dom/icons.ts) before the close button. It opens a small menu with:
    • New conversation: calls newConversation().
    • Download transcript: saves the visible conversation as a .txt file (who said it and the text, one message after another) through a Blob and a temporary <a download>. No network request.
    • Privacy: a link that opens in a new tab. It's only shown when a new privacyUrl config option is set (only https: and http: URLs).
  • Use the menu button pattern: aria-haspopup="menu" and aria-expanded on the button, role="menu" and role="menuitem", arrow keys and Home/End to move, Enter/Space to pick, and Escape closes the menu only, putting focus back on the button. Escape now closes the popup, so the menu has to handle Escape first (the F-05 key table says Escape "closes that layer only").
  • New strings in WidgetLocaleStrings (English defaults; other languages fall back to them): the button label, "Download transcript" and "Privacy".
  • Use --cc-surface-raised for the menu background, with logical CSS so RTL works.

Size
The panel is at 17.15 of 18 kB. If the menu doesn't fit, it can load on first open the way the pre-chat form does (its own chunk, with a 2 kB budget). Talk to me before raising a budget.

Acceptance criteria

  • Unit tests: the menu opens and closes, keyboard navigation works, New conversation resets the log, the transcript file has the right text, and Privacy only shows with privacyUrl set (and never for a javascript: URL)
  • An e2e test for opening the menu with the keyboard and choosing New conversation, with the axe checks passing in light, dark and RTL
  • privacyUrl documented in website/src/content/docs/widget/configuration.mdx and the widget README (pnpm docs:check passes)
  • A minor changeset for @chatcops/widget; pnpm test:coverage, pnpm lint, pnpm api (commit the snapshot change) and pnpm size pass

Comment here to be assigned.

Linguagem predominante
TypeScript
Estrelas
13
Forks
7
Merge médio
3h 15min
PRs com merge (30d)
330

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de codercops/chatcops

Todas as issues de codercops/chatcops

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.