Display chat error messages to users in the chat form

[Copilot]

Overview

This PR implements user-facing error message display for the chat functionality, addressing the TODO comment in the chat form that previously only logged errors to the console.

Changes

Previously, when the AI chat action encountered an error, it was only logged to the console and users received no feedback. This PR adds a visible error message display area in the chat form UI.

Implementation Details

1. Error State Management: Added errorMessage state to the ChatForm component to track error messages returned from askAI()

2. Error Display UI: Added a new error message display area positioned between the close button (閉じる) and send button (➤). The error message:

   • Appears conditionally only when an error exists
   • Uses red text for visibility
   • Centers in the available space using flexbox
   • Automatically clears when a new question is submitted

3. Error Handling Flow: Updated the handleSubmit function to properly set and clear error messages instead of creating unused error message objects

Visual Layout

[ 閉じる ]  [ Error message appears here in red ]  [ ➤ ]

Testing

• ✅ ESLint passes with no warnings or errors
• ✅ TypeScript type checking passes
• ✅ Production build completes successfully
• ✅ CodeQL security scan shows no vulnerabilities

Fixes #59 (related discussion: #59 (comment))

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• sparrow.cloudflare.com
  • Triggering command: /usr/local/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/my-code/my-code/node_modules/wrangler/wrangler-dist/cli.js types --env-interface CloudflareEnv cloudflare-env.d.ts (dns block)
• workers.cloudflare.com
  • Triggering command: /usr/local/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/my-code/my-code/node_modules/wrangler/wrangler-dist/cli.js types --env-interface CloudflareEnv cloudflare-env.d.ts (dns block)
  • Triggering command: node /home/REDACTED/work/my-code/my-code/node_modules/.bin/next lint (dns block)
  • Triggering command: node /home/REDACTED/work/my-code/my-code/node_modules/.bin/next build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>chatエラーメッセージをユーザーに表示</issue_title>
<issue_description>(たぶん正常時のaddChat()と別で、チャット入力欄のところに表示したほうがいいと思う)

Originally posted by @na-trium-144 in #59 (comment)
</issue_description>

<agent_instructions>chatFormの閉じるボタンと送信ボタンの間にエラーメッセージを表示する場所を追加し、chatAction内で発生したエラーメッセージはそこに表示するようにしてください</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes chatエラーメッセージをユーザーに表示 #62

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	my-code	69221ae	Commit Preview URL Branch Preview URL	Oct 24 2025, 05:34 PM