Feedback UI

[michaelmagan]

Add a component to Strudel to give us feedback.

It should get rendered whenever a user has feedback - basically, any time the user seems to be unhappy or asks for something that isn't supported. The assistant should respond with this component. The descriptions should be really clear on when to render this.

The component should have a title and a body. The title should be short (no more than 5-10 words), and the body can be longer, focused on the problem that the user is trying to solve.

When they hit submit send an email to support.tambo.com support@tambo.co

Disable the inputs.

I have the button show submitted. Then have another button show up below. It says open GitHub issue. It should use a GitHub URL but pre-fill the title and body. I don't know what the URL pre-fills allow if it allows tagging it we should create a shadow tag that they don't see in the component. So for example, if we think it's a bug or it's a feature, we add that tag and this component let's set that as an E of handful of common label types for issues. But the user doesn't need to see that in the UI when they're sending feedback.

[charliecreates]

Expand this to see my work.

• Previously scanned .github/, package.json, src/components/tambo/*.tsx, src/lib/tambo.ts, src/lib/config.ts, auth/email wiring in src/lib/auth*.ts, and src/app/chat/page.tsx to understand existing patterns and the config.githubNewIssue hook point for the feedback UI.
• Previously reviewed MessageInputTextarea and elicitation-ui plus useSession() usage to mirror textarea UX, disabled states, and capture session.user.email for feedback metadata in FeedbackForm.
• Previously added src/components/tambo/feedback-form.tsx and feedbackFormSchema to stream assistant-suggested text via useTamboStreamStatus, persist local edits with useTamboComponentState, and build a GitHub issue body annotated with tambo-issue-type and reporter email comments.
• Previously implemented the FeedbackForm UI so submit POSTs to /api/feedback, disables inputs on send/success, shows a Submitted state, and then reveals an Open GitHub issue button wired to config.githubNewIssue via URLSearchParams.
• Previously created src/app/api/feedback/route.ts using zod validation and Resend to email support@tambo.co and support@tambo.com, and registered FeedbackForm + feedbackFormSchema in src/lib/tambo.ts with clear render instructions and internal issueType tags.
• Previously tightened buildGithubIssueBody and wired a concrete "bug" | "feature" | "question" | "other" union through /api/feedback and GitHub label mapping, fixed undefined draft state in feedback-form.tsx, and confirmed npm run build passes; pushed these via feat: add feedback UI and fix: handle undefined feedback draft state.
• Previously hardened /api/feedback error handling in route.ts with safe escapeHtml, consistent { ok: false, error } JSON responses, and normalizedTitle, plus better empty-body defaults and surfaced API errors in FeedbackForm, then committed as chore: harden feedback submission.
• Previously ran npm run lint and npm run build to confirm the feedback flow passes type-checking and linting, with only existing @next/next/no-img-element warnings and one react-hooks/exhaustive-deps warning on config.githubNewIssue in feedback-form.tsx.
• Removed the unnecessary config.githubNewIssue dependency from the React.useMemo call in src/components/tambo/feedback-form.tsx to satisfy the react-hooks/exhaustive-deps rule and avoid a misleading dependency warning, then committed as fix: remove unnecessary useMemo dependency on ai-20-feedback-ui.
• Re-ran npm run lint after the hook change to confirm it exits with code 0 and only reports the pre-existing @next/next/no-img-element warnings in src/app/page.tsx and src/components/info-modal.tsx, with no new issues from the feedback UI.

[charliecreates]

Opened PR #21 with the new AI-renderable feedback flow: FeedbackForm (title/body) + POST /api/feedback (emails support) + a post-submit “Open GitHub issue” link that pre-fills title/body and includes a hidden issueType tag.

#21

Changes

• Added FeedbackForm Tambo component at src/components/tambo/feedback-form.tsx:
  • Editable title + body
  • On submit: sends to /api/feedback, disables inputs, button shows “Submitted”
  • After submit: shows “Open GitHub issue” button with pre-filled title/body, plus hidden metadata (and attempts to prefill labels via ?labels=...)
• Added POST /api/feedback at src/app/api/feedback/route.ts:
  • Emails support@tambo.co + support@tambo.com via Resend when RESEND_API_KEY is set
  • In dev (no RESEND_API_KEY): logs to console and returns success
• Registered FeedbackForm in src/lib/tambo.ts with explicit guidance for when the assistant should render it (user unhappy / unsupported request / bug report)

Verification

npm ci

# next lint: 0 errors, 2 warnings
npm run lint

# next build: success
npm run build

• npm run build prints a Better Auth warning about BETTER_AUTH_SECRET when env isn’t configured in the devbox, but the build completes successfully.
• Self-review note skipped: didn’t add extra user-facing copy about possible email follow-up since it wasn’t requested in Feedback UI #20 (kept the UI minimal).