Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Widget answer cards: comparison table, stat and status timeline

Open
  • Is something wrong?
#334 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
48/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript
Domain
ai, frontend

Research direction

Start by reading the implementation and tests for the first answer cards from #329, then find the widget rendering, assistant card-generation checks, and widget documentation. Add the comparison, stat, and status/timeline layouts while following the existing safety and length-limit behavior. Done means responsive rendering at 375 pixels, plain-text fallback when knowledge-base evidence is missing, tests for the specified checks, and docs for each card.

Written by the indexing model from the issue text.

Description

enhancement

The problem today

The first set of answer cards (steps, quick replies, callout, link, contact) shipped in #329. They cover how-tos and "talk to a person." Some questions still get a plain paragraph where a layout would be much easier to read: comparing options, a single key number, or where something is in a process.

What we're adding

Three more cards. Each is a ready-made layout the assistant fills in with information from the business's own knowledge base. They only display information. They don't collect anything from the visitor and don't change any data.

  1. Comparison table. For "what's the difference between your plans?" Two to four options side by side, with up to six rows each (for example price and what's included). On a narrow screen it scrolls sideways inside the card, with the row labels staying in view.
  2. Stat card. One big value with a short label, such as "Response time: under 2 hours" or "Free trial: 14 days."
  3. Status / timeline card. For answers about a process, such as "Order placed, shipped, out for delivery, delivered," with the current step highlighted. Two to six steps.

Rules

  • Only real information. Everything shown must appear in the business's own knowledge base content the assistant was given for that answer. If a number, price or status isn't there, the assistant answers in plain text and shows no card. This is enforced in code the same way it is for the link and contact cards, not left to the assistant's judgment.
  • Same safety rules as the first cards. Text is shown as plain text (never as HTML), length limits apply, and anything that doesn't pass the checks is dropped instead of shown half-broken.
  • Mobile first. Each card must read well at 375 pixels wide.
  • Styling. Use the current widget look. When brand customization (#333) ships, the cards pick up the business's colors through the same theme settings as the existing cards. This issue doesn't build any color settings.

Out of scope (so nobody has to guess)

  • "Was this helpful?" thumbs up/down. It needs storage, a place for owners to see results and a decision on abuse limits, so it's tracked on its own in #343.
  • Turning individual cards on or off per business. Not part of this issue. Every business gets all cards. We can add a per-business switch later if anyone asks for it.
  • Any card that takes input from the visitor (forms, ratings, bookings).

Done when

  • Comparison table, stat and status cards render correctly on desktop and at 375 pixels wide
  • The assistant only fills them from knowledge base content and falls back to plain text when it can't
  • Tests cover rendering, the fallback to text, length limits, and the "only real information" check
  • The widget docs show each card

Depends on

  • #329 (the first cards, merged).
  • Nothing else. Brand colors from #333 are picked up later and don't block this.
Dominant language
TypeScript
Stars
16
Forks
2
Avg merge
5h 35m
Merged PRs (30d)
166

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from answerLoops/answerLoops

All issues in answerLoops/answerLoops

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.