Chat workspace

A focused conversation surface with status, context, and a composer.

1,074 chars

import { useState } from "react";
import { Badge, Button, Card } from "@exepert/ui";

export default function Example() {
  const [message, setMessage] = useState("");
  return (
    <main className="template-shell" data-ui-component="ChatWorkspace">
      <Card>
        <header className="template-header">
          <div><span className="eyebrow">EXEPERT / SESSION</span><h1>Research thread</h1></div>
          <Badge>LIVE</Badge>
        </header>
        <div className="template-message"><strong>System</strong><p>Compare model behaviour with the trace in view.</p></div>
        <div className="template-message template-message-user"><strong>You</strong><p>Show the important state without hiding the details.</p></div>
        <form className="template-composer" onSubmit={(event) => { event.preventDefault(); setMessage(""); }}>
          <input aria-label="Message" value={message} onChange={(event) => setMessage(event.target.value)} placeholder="Ask a follow-up" />
          <Button type="submit">Send</Button>
        </form>
      </Card>
    </main>
  );
}

Starting preview…Draft saved locally

Live previewStarting preview…

Opaque sandbox · no session access