ChatProcess

render: () => (
  <Measure>
    <Stack>
      <ChatProcess label="Check request order · Completed">
        <p>Queries are sent in input order, but responses return in network completion order.</p>
        <p>Submit only the current request's results to avoid overwrites from old responses.</p>
      </ChatProcess>
      <ChatProcess label="Waiting for verification · 1 item" open>
        <ChatToolCall
          icon={<Icon name="search" />}
          label="Verify quick successive input and list recovery after clearing the search term"
          state="waiting"
          detail="Requires a connection to the real service."
        />
      </ChatProcess>
    </Stack>
  </Measure>
),
});

export const ChatSourcesDetailStory = defineStory({
id: "chat-sources-detail",
title: "Sources · Titles and descriptions",
group: "Conversation components",
groupOrder: 60,
component: "ChatSources",
variant: "Expanded sources",
description:
  "Sources are layered away from the answer; the title locates the source and the description helps judge why to open it.",
render: () => (
  <Measure>
    <Stack>
      <p>
        When checking request cancellation and response handling, you can open the references
        below.
      </p>
      <ChatSources
        open
        items={[
          reference,
          {
            title: "Fetch API: Handling requests and responses",
            url: "https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API",
            description: "The request lifecycle and the meaning of returned results.",
          },
        ]}
      />
    </Stack>
  </Measure>
),
});

const rows = (wrap: boolean): Child[] => {
const shape = (item: Child): Child =>
  wrap ? <div style={{ display: "contents" }}>{item}</div> : item;
return [
  shape(
    <ChatMessageListItem>
      <ChatMessage role="user" author="You" surface="none">
        <ChatBubble>Consecutive replies don't need that much space.</ChatBubble>
      </ChatMessage>
    </ChatMessageListItem>,
  )