MessageThread

Renders a list of user/assistant messages as styled chat bubbles with proper alignment.

Use and inspectUse this as a presentational interface around your own submit, stream, or state handlers. Reset preview only remounts the local example; it does not send a request or connect to a model.Next: inspect the source and wire its callback to a bounded backend action.

MessageThreadRenders a list of user/assistant messages as styled chat bubbles with proper alignment.

export type Message = {
  role: "user" | "assistant";
  content: string;
};

type MessageThreadProps = {
  messages: Message[];
};

export function MessageThread({ messages }: MessageThreadProps) {
  return (
    <div className="pk-thread">
      {messages.map((msg, i) => (
        <div key={i} className={`pk-msg pk-msg--${msg.role}`}>
          <div className={`pk-bubble pk-bubble--${msg.role}`}>{msg.content}</div>
        </div>
      ))}
    </div>
  );
}

Props

Prop	Type	Default	Description
`messages`*	`Message[]`	—	Array of { role, content } objects