Message scroller#

const Chat = () => {
  const [scrollBehavior, setScrollBehavior] = useState<'turn' | 'end'>(
    'turn'
  )
  const { messages, status, sendMessage, stop } = useChatSimulation()
  return (
    <div
      style={{
        ...chatStyle,
        height: '32rem',
      }}
    >
      <ToggleButton.Group
        label="Scroll behavior"
        value={scrollBehavior}
        onChange={({ value }) =>
          setScrollBehavior(value as 'turn' | 'end')
        }
      >
        <ToggleButton value="turn" text="turn" />
        <ToggleButton value="end" text="end" />
      </ToggleButton.Group>

      <Conversation
        scrollBehavior={scrollBehavior}
        style={{
          flex: '1 1 auto',
        }}
      >
        {messages.map((message) => (
          <Message key={message.id} id={message.id} from={message.role}>
            <DemoMessageContent message={message} />
          </Message>
        ))}
        {status === 'submitted' && <MessageIndicator />}
      </Conversation>

      <PromptInput
        variant="compact"
        placeholder="Try: Compare my spending"
        isBusy={status === 'submitted' || status === 'streaming'}
        onSubmit={({ value }) =>
          sendMessage({
            text: value,
          })
        }
        onStop={stop}
      />
    </div>
  )
}
render(<Chat />)

const Chat = () => {
  const [peek, setPeek] = useState('3rem')
  const [count, setCount] = useState(2)
  return (
    <>
      <Flex.Horizontal align="center" bottom>
        <ToggleButton.Group
          label="Peek"
          value={peek}
          onChange={({ value }) => setPeek(String(value))}
        >
          <ToggleButton value="0" text="None" />
          <ToggleButton value="3rem" text="3rem" />
          <ToggleButton value="6rem" text="6rem" />
        </ToggleButton.Group>
        <Button
          variant="secondary"
          onClick={() => setCount((current) => current + 1)}
        >
          Ask another question
        </Button>
      </Flex.Horizontal>

      <Conversation
        style={
          {
            height: '18rem',
            '--ai-conversation-peek': peek,
          } as React.CSSProperties
        }
      >
        {Array.from(
          {
            length: count,
          },
          (_, index) => (
            <Fragment key={index}>
              <Message from="user">Question {index + 1}</Message>
              <Message>{scrollerReply}</Message>
            </Fragment>
          )
        )}
      </Conversation>
    </>
  )
}
render(<Chat />)

const SavedChat = () => {
  const [scrollBehavior, setScrollBehavior] = useState<'turn' | 'end'>(
    'turn'
  )
  return (
    <>
      <ToggleButton.Group
        label="Scroll behavior"
        value={scrollBehavior}
        onChange={({ value }) =>
          setScrollBehavior(value as 'turn' | 'end')
        }
        bottom
      >
        <ToggleButton value="turn" text="turn" />
        <ToggleButton value="end" text="end" />
      </ToggleButton.Group>

      <Conversation
        key={scrollBehavior}
        scrollBehavior={scrollBehavior}
        style={{
          height: '18rem',
        }}
      >
        {['How do I block my card?', 'Can I order a new one?'].map(
          (question) => (
            <Fragment key={question}>
              <Message from="user">{question}</Message>
              <Message>
                <P>{scrollerReply}</P>
                <P top>{scrollerReply}</P>
              </Message>
            </Fragment>
          )
        )}
      </Conversation>
    </>
  )
}
render(<SavedChat />)

const History = () => {
  const [first, setFirst] = useState(5)
  const turns = Array.from(
    {
      length: 8 - first,
    },
    (_, index) => first + index
  )
  return (
    <>
      <Button
        variant="secondary"
        bottom
        disabled={first === 1}
        onClick={() => setFirst((current) => Math.max(1, current - 2))}
      >
        Load earlier messages
      </Button>

      <Conversation
        style={{
          height: '18rem',
        }}
      >
        {turns.map((turn) => (
          <Fragment key={turn}>
            <Message from="user">Question {turn}</Message>
            <Message>{scrollerReply}</Message>
          </Fragment>
        ))}
      </Conversation>
    </>
  )
}
render(<History />)

const css = `
          @keyframes my-chat-enter {
            from {
              opacity: 0;
              filter: blur(0.5rem);
            }
          }
          .my-chat--blur .dnb-ai-conversation__content > [data-entering] {
            animation: my-chat-enter 600ms ease-out;
          }
        `
const Chat = () => {
  const [animation, setAnimation] = useState('fade')
  const [count, setCount] = useState(1)
  return (
    <>
      <style>{css}</style>
      <Flex.Horizontal align="center" bottom>
        <ToggleButton.Group
          label="Animation"
          value={animation}
          onChange={({ value }) => setAnimation(String(value))}
        >
          <ToggleButton value="fade" text="Fade" />
          <ToggleButton value="blur" text="Blur" />
        </ToggleButton.Group>
        <Button
          variant="secondary"
          onClick={() => setCount((current) => current + 1)}
        >
          Ask another question
        </Button>
      </Flex.Horizontal>

      <Conversation
        className={`my-chat--${animation}`}
        style={{
          height: '18rem',
        }}
      >
        {Array.from(
          {
            length: count,
          },
          (_, index) => (
            <Fragment key={index}>
              <Message from="user">Question {index + 1}</Message>
              <Message>{scrollerReply}</Message>
            </Fragment>
          )
        )}
      </Conversation>
    </>
  )
}
render(<Chat />)

const questions = [
  {
    id: 'block',
    text: 'How do I block my card?',
  },
  {
    id: 'order',
    text: 'Can I order a new card?',
  },
  {
    id: 'time',
    text: 'How long does it take?',
  },
  {
    id: 'cost',
    text: 'Does it cost anything?',
  },
]
const Outline = () => {
  const { scrollToMessage } = useConversation('outline-chat')
  const { currentTurnId } = useConversationVisibility('outline-chat')
  return (
    <Flex.Horizontal bottom>
      {questions.map(({ id, text }) => (
        <Button
          key={id}
          variant={currentTurnId === id ? 'primary' : 'secondary'}
          size="medium"
          aria-current={currentTurnId === id ? 'step' : undefined}
          onClick={() => scrollToMessage(id)}
        >
          {text}
        </Button>
      ))}
    </Flex.Horizontal>
  )
}
render(
  <>
    <Outline />
    <Conversation
      id="outline-chat"
      style={{
        height: '18rem',
      }}
    >
      {questions.map(({ id, text }) => (
        <Fragment key={id}>
          <Message from="user" id={id}>
            {text}
          </Message>
          <Message>{scrollerReply}</Message>
        </Fragment>
      ))}
    </Conversation>
  </>
)

const Toolbar = () => {
  const { scrollToStart, scrollToEnd } = useConversation('state-chat')
  const { isAtStart, isAtEnd } = useConversationScrollState('state-chat')
  return (
    <Flex.Horizontal bottom>
      <Button
        variant="secondary"
        disabled={isAtStart}
        onClick={scrollToStart}
      >
        Go to start
      </Button>
      <Button variant="secondary" disabled={isAtEnd} onClick={scrollToEnd}>
        Go to end
      </Button>
    </Flex.Horizontal>
  )
}
render(
  <>
    <Toolbar />
    <Conversation
      id="state-chat"
      style={{
        height: '18rem',
      }}
    >
      {Array.from(
        {
          length: 4,
        },
        (_, index) => (
          <Fragment key={index}>
            <Message from="user">Question {index + 1}</Message>
            <Message>{scrollerReply}</Message>
          </Fragment>
        )
      )}
    </Conversation>
  </>
)

const turns = Array.from(
  {
    length: 500,
  },
  (_, index) => ({
    id: `question-${index + 1}`,
    number: index + 1,
  })
)
const Toolbar = () => {
  const { scrollToStart, scrollToMessage, scrollToEnd } =
    useConversation('long-chat')
  const { currentTurnId } = useConversationVisibility('long-chat')
  return (
    <Flex.Horizontal align="center" bottom>
      <Button variant="secondary" onClick={scrollToStart}>
        Go to start
      </Button>
      <Button
        variant="secondary"
        onClick={() => scrollToMessage('question-250')}
      >
        Go to question 250
      </Button>
      <Button variant="secondary" onClick={scrollToEnd}>
        Go to end
      </Button>
      <span>
        Reading: {currentTurnId?.replace('question-', 'question ') ?? '–'}
      </span>
    </Flex.Horizontal>
  )
}
render(
  <>
    <Toolbar />
    <Conversation
      id="long-chat"
      style={{
        height: '24rem',
      }}
    >
      {turns.map(({ id, number }) => (
        <Fragment key={id}>
          <Message from="user" id={id}>
            Question {number}
          </Message>
          <Message>{scrollerReply}</Message>
        </Fragment>
      ))}
    </Conversation>
  </>
)