updated chat interface

[paribaker]

Summary

Refactors the chat interface to use react-use-websocket and adds a new chat service layer (api/models/queries) wired through TanStack Query.

What Changed

• Replaced manual WebSocket lifecycle handling in chat-interface.tsx with react-use-websocket
• Added loading and connection-error UI states in the chat interface
• Added chat service files:
  • src/services/chat/api.ts
  • src/services/chat/models.ts
  • src/services/chat/queries.ts
  • src/services/chat/index.ts
• Added dependencies:
  • react-use-websocket
  • @testing-library/dom

Current Notes / Follow-ups

• The new chat query path assumes a list endpoint under /api/chat and uses chats?.results?.[0]?.id for chat_id.
• This should be validated against currently available backend routes before approval.
• Frontend tests were not added for websocket lifecycle/error-state behavior in this PR.

CI / Merge State

• Rebased onto latest main
• Mergeable from a git-conflict standpoint
• Setup check is currently failing due to Heroku app setup environment, while lint/tests are passing

[Copilot]

Pull Request Overview

This PR adds a real-time chat interface by wiring up new chat service modules (models, API, queries) and integrating WebSocket connectivity and React Query.

• Introduces Zod models, API client, and query helpers for chat
• Implements ChatInterface component using react-use-websocket and TanStack Query
• Updates dependencies (react-use-websocket, @testing-library/dom)

Reviewed Changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
clients/web/react/src/services/chat/models.ts	Defines Zod shape for chat entity
clients/web/react/src/services/chat/api.ts	Configures chatApi with REST client
clients/web/react/src/services/chat/queries.ts	Creates reusable React Query option builders
clients/web/react/src/services/chat/index.ts	Re-exports chat modules
clients/web/react/src/components/chat-interface.tsx	Builds chat UI with WebSocket handlers and query
clients/web/react/package.json	Adds new runtime and testing dependencies

Files not reviewed (1)

• {{cookiecutter.project_slug}}/clients/web/react/package-lock.json: Language not supported

Comments suppressed due to low confidence (4)

clients/web/react/src/components/chat-interface.tsx:128

• Accessing chats.results[0].id without confirming that results is defined and non-empty can lead to runtime errors. Guard this access or provide a fallback if no chats are returned.

chat_id: chats?.results?.[0]?.id, // Use the first chat ID for now

clients/web/react/src/components/chat-interface.tsx:15

• Consider handling loading and error states from this query (e.g. isLoading, isError) in the UI to improve user feedback when fetching chat list fails or is pending.

const { data: chats } = useQuery(chatQueries.list())

clients/web/react/src/services/chat/queries.ts:1

• The new query helpers (chatQueries.all, retrieve, list) currently lack associated tests. Adding unit tests for these functions will ensure correct query key generation and option configuration.

import { queryOptions } from '@tanstack/react-query'

clients/web/react/src/services/chat/models.ts:3

• Currently chatShape is an object of Zod types, not a Zod schema itself. Wrap it in z.object(...) (e.g. export const chatSchema = z.object({ id: z.string(), ... })) so downstream code receives a proper schema.

export const chatShape = {

[paribaker]

I think this will be replaced with Dami's PR

[whusterj]

I think this will be replaced with Dami's PR

Are you referring to #397? Both PRs are getting stale. Do we still want to make these changes or close the PRs?

[whusterj]

Focused risk findings after rebase/push:

1. Potential API mismatch (likely runtime failure)

   • Frontend now calls chatApi.list() on mount via useQuery(chatQueries.list()).
   • chatApi is configured at /api/chat, but server routes currently expose only /api/chat/system-prompt/ for chat.
   • Likely result: failing list call and no usable chat_id from chats?.results?.[0]?.id.
   • Files:
     • {{cookiecutter.project_slug}}/clients/web/react/src/components/chat-interface.tsx (query usage + chat_id)
     • {{cookiecutter.project_slug}}/clients/web/react/src/services/chat/api.ts (baseUri)
     • {{cookiecutter.project_slug}}/server/{{cookiecutter.project_slug}}/chat/urls.py (available endpoints)

2. Connection error UI can remain stuck after recovery

   • isConnectionError is set to true in onError but is not reset on reconnect/open.
   • This can keep showing error overlay even if socket reconnects.
   • File: {{cookiecutter.project_slug}}/clients/web/react/src/components/chat-interface.tsx

3. Auth-failure behavior regressed vs prior implementation

   • Previous code handled close code 4003 explicitly.
   • New code retries reconnect on all close events (shouldReconnect: () => true), which may loop on auth failures.
   • File: {{cookiecutter.project_slug}}/clients/web/react/src/components/chat-interface.tsx

4. Missing frontend tests for new behavior

   • No tests added for websocket lifecycle/reconnect, error overlay transitions, or chat query integration.

Current CI status after rebase push:

• Passing: lint/tests (web + server)
• Failing: Setup (Heroku app not found), which still blocks mergeability state.

Recommendation from this pass: needs fixes before approval.