> ## Documentation Index
> Fetch the complete documentation index at: https://wb-21fd5541-docs-3024-aria-message-queue.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Chat with ARIA

export const AriaChatBubbles = ({prompt, response}) => {
  const [isDark, setIsDark] = useState(false);
  const [promptCopied, setPromptCopied] = useState(false);
  useEffect(() => {
    const root = document.documentElement;
    const sync = () => setIsDark(root.classList.contains('dark'));
    sync();
    const obs = new MutationObserver(sync);
    obs.observe(root, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => obs.disconnect();
  }, []);
  useEffect(() => {
    if (!promptCopied) {
      return undefined;
    }
    const timeout = setTimeout(() => setPromptCopied(false), 2000);
    return () => clearTimeout(timeout);
  }, [promptCopied]);
  const copyText = text => {
    navigator.clipboard.writeText(text).then(() => setPromptCopied(true)).catch(console.error);
  };
  const userBg = isDark ? '#363C44' : '#F8F8F8';
  const userBorder = isDark ? '#4B535C' : '#DFE0E2';
  const textColor = isDark ? '#E8E8E9' : '#2B3038';
  const iconColor = isDark ? '#8F949E' : '#79808A';
  const iconHoverBg = isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.05)';
  const bubbleText = {
    fontSize: '15px',
    color: textColor,
    overflowWrap: 'anywhere'
  };
  const bubbleBase = {
    maxWidth: '85%'
  };
  const copyIcon = promptCopied ? <svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{
    color: '#FCBC32'
  }}>
      <path d="M20 6 9 17l-5-5" />
    </svg> : <svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
    </svg>;
  return <div aria-label="ARIA chat example" className="not-prose flex flex-col gap-3" role="group">
      {}
      <div className="flex w-full justify-end">
        <div className="flex w-fit items-start gap-1 rounded-2xl py-2 pl-3 pr-1.5" style={{
    ...bubbleBase,
    backgroundColor: userBg,
    border: `1px solid ${userBorder}`
  }}>
          <div className="min-w-0 flex-1 hyphens-auto whitespace-pre-wrap" style={bubbleText}>
            {prompt}
          </div>
          <button type="button" className="mt-0.5 shrink-0 rounded-lg p-1.5 cursor-pointer" style={{
    color: iconColor,
    background: 'transparent'
  }} onMouseEnter={e => {
    e.currentTarget.style.backgroundColor = iconHoverBg;
  }} onMouseLeave={e => {
    e.currentTarget.style.backgroundColor = 'transparent';
  }} onClick={() => copyText(prompt)} aria-label="Copy user prompt">
            {copyIcon}
          </button>
        </div>
      </div>
      {}
      <div className="flex w-full justify-start">
        <div className="w-fit rounded-2xl py-2 px-3" style={{
    ...bubbleBase,
    border: '1px solid #CDF4F7'
  }}>
          <div className="hyphens-auto whitespace-pre-wrap" style={bubbleText}>
            {response}
          </div>
        </div>
      </div>
    </div>;
};

This page describes how to manage your conversations with ARIA: starting and resuming chats, queueing follow-up messages, adding context such as runs and images, and giving feedback on responses.

## Start a new chat

To start a new chat, open ARIA, then click on the pencil icon in the upper right corner of the chat window.

You can run multiple chats in parallel at a time. ARIA will notify you when it responds to a chat, even if you have closed the chat window.

Starting a new chat does not delete your previous conversations. To [view previous conversations](/aria/chat#view-chat-history), open the chat history by clicking the three horizontal lines in the upper left corner of the chat window.

## Send a message

Type a message and press **Enter** to send it.

* Press **Shift+Enter** to add new lines.
* Click **+** to add images.
* To add a run reference, type `@` and select a run from the list. Type to filter and fuzzy-search the list.
* For more flexibility, compose a more complex message in a text editor and paste it. Plain text is supported, and pasted `@` characters are not resolved to run references.

To cancel the current operation and *immediately* send the next [queued message](#queue-messages), press the stop icon to the right of the text input.

## Queue messages

The message queue holds the follow-ups you send while ARIA is still working. Instead of waiting for a response, send your next message and it joins a queue above the message box. ARIA runs each queued message in order, with the full conversation as context, as soon as it finishes the message before it.

Use the queue to line up several steps at once and step away, rather than returning to the chat to send each one. For example, you might start with a comparison:

<AriaChatBubbles prompt="Compare the last 10 runs and tell me which hyperparameters mattered most." response="Learning rate and batch size account for most of the variance in validation loss across those 10 runs. Details for each below." />

While that response streams in, queue the next two steps:

```text title="Queued messages" theme={null}
Chart validation loss against learning rate for those runs.

Write up the comparison as a report I can share with my team.
```

The queue header shows how many messages are waiting. Each queued message has three controls:

* **Pencil icon**: Edit the message before ARIA runs it. ARIA moves the message into the message box and removes it from the queue, so send it again to requeue it. This control is unavailable while the message box already holds a draft.
* **Up arrow icon**: Run the message now instead of waiting its turn. ARIA stops what it's working on and runs this message next. The other queued messages keep their order.
* **Trash can icon**: Delete the message from the queue.

Queued messages keep the context you attached to them, including [run mentions](/aria/chat#add-context-to-a-conversation) and [images](/aria/chat#add-an-image-to-a-conversation).

Queueing begins after your first message in a chat, because a queue needs a conversation to run against. The first message you send, and any message you send to an idle chat with an empty queue, goes to ARIA immediately. Each chat keeps its own queue, and the queues in chats you close keep running.

If ARIA needs a clarifying answer or your permission before it continues, the queue pauses until you respond. To run a queued message without responding first, click the up arrow icon next to it.

## View chat history

To view previous conversation:

1. Open ARIA.
2. Click the three horizontal lines in the upper left corner of the chat window to open the chat history.
3. Select a conversation.

W\&B organizes your conversations with ARIA by project and by date. You can resume a previous conversation by selecting it from the chat history. You can also [delete a conversation by clicking the trash](/aria/chat#delete-previous-conversations) can icon next to the conversation.

## Delete previous conversations

To delete a previous conversation:

1. Open ARIA.
2. Click the three horizontal lines in the upper left corner of the chat window to open the chat history.
3. Click the trash can icon next to the conversation you want to delete.

## Undock chat window

You can undock the chat window into a separate window, which allows you to view the agent's response side-by-side with your project data.

To undock the chat, click the undock icon in the upper right corner of the chat window next to the close (**X**) button.

## Add context to a conversation

You can use the `@` symbol to specify a specific run in your prompt. For example, you can ask ARIA to analyze a specific run by including the run's name in your prompt:

```text title="User prompt" theme={null}
Analyze the run @run-20230615_123456-abcdefg and summarize the results
```

## Add an image to a conversation

Click on the plus icon (`+`) in the lower left corner of the chat window to add an image to your conversation. You can then ask ARIA to analyze the image or provide information about it.

## Provide feedback

Click the thumbs up or thumbs down icon at the end of the response to provide feedback on ARIA's response. Your feedback helps W\&B improve ARIA's performance and accuracy.

For information about how W\&B handles data usage for ARIA, see [Governance and security](/aria/governance).