Chat Interface

React Chat Widget

A modern, animated chat interface built with React 19 and TypeScript for interacting with the Job Agent.

Job Agent

Online

Hi! I can answer questions about your career history. What would you like to know?

10:30

What programming languages do I know?

10:31

Based on your resume, you have experience with C#, Python, TypeScript, JavaScript, and SQL.

10:31

Widget Features

  • Floating Interface

    Fixed position chat bubble that opens into a full conversation panel

  • Animated Transitions

    Smooth slide-up animation when opening, fade-in for messages

  • Typing Indicator

    Animated dots show when the agent is processing your question

  • Message History

    Auto-scrolling conversation with timestamps and role indicators

  • Responsive Design

    Full-width on mobile devices, compact widget on desktop

  • Source Attribution

    Responses include which data collections were used

Frontend Stack

R

React

19.2.0

Modern hooks-based UI

T

TypeScript

5.9.3

Full type safety

V

Vite

7.2.4

Fast HMR builds

C

CSS

Pure

Custom animations

Sample Questions

"What companies have I worked for?"

"What cloud platforms do I have experience with?"

"When did I start working in tech?"

"What is my educational background?"

"What leadership roles have I held?"

"What industries have I worked in?"

Using the Widget

// Import the ChatWidget component

import

{ ChatWidget } from './ChatWidget';

// Add to your app

function

App() {

return (

<div>

{/* Your app content */}

<ChatWidget />

</div>

);

}