> ## Documentation Index
> Fetch the complete documentation index at: https://docs.piebald.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Chat view configuration

<Badge color="green">Available in [Piebald Pro](https://piebald.ai/pricing)</Badge>

Piebald's chat view can be configured to look and behave a few different ways.  These configuration options are available in the **Configuration** dropdown accessible from the switches icon in the top right corner.

<img class="shadow-md rounded-xl" width="500" alt="chat_view_configuration.png" src="https://mintcdn.com/piebald/8Y9BNGsLA7OR-jy1/imgs/chat_view_configuration.png?fit=max&auto=format&n=8Y9BNGsLA7OR-jy1&q=85&s=3cc5560d97bb2facc1ea84a16337fa16" data-path="imgs/chat_view_configuration.png" />

### Smooth streaming configuration

You can customize the way text is streamed to the chat view.

* **Streaming type:** Choose None for no streaming, Raw for streaming exactly as the upstream provider streams tokens, and Smooth for the customizable streaming experience.
* **Streaming speed:** Set a fixed speed in milliseconds (e.g. 100ms) or dynamic speed to stream at the speed that tokens are generated by the upstream provider.
* **Chunk size:** Set whether to stream by character or by word.
* **Animation:** Choose no animation, a fade animation, or a blur animation.
* **Animation speed:** Set the animation speed to a fixed speed in milliseconds.

Selecting the **Blur** animation will produce streaming that looks like this:

<img class="shadow-md rounded-xl" width="500" alt="smooth_streaming_blur.png" src="https://mintcdn.com/piebald/8Y9BNGsLA7OR-jy1/imgs/smooth_streaming_blur.png?fit=max&auto=format&n=8Y9BNGsLA7OR-jy1&q=85&s=092ad7f6ad6d6920745a24e9c558d3ac" data-path="imgs/smooth_streaming_blur.png" />

**Fade** looks like this:

<img class="shadow-md rounded-xl" width="500" alt="smooth_streaming_fade.png" src="https://mintcdn.com/piebald/8Y9BNGsLA7OR-jy1/imgs/smooth_streaming_fade.png?fit=max&auto=format&n=8Y9BNGsLA7OR-jy1&q=85&s=6e320c800cabc1ea2a4c95987849b963" data-path="imgs/smooth_streaming_fade.png" />

### Raw markdown mode

<Badge color="blue">Available in Piebald Basic (Free)</Badge>

You can view raw markdown text content directly, instead of having it rendered as rich text.  Open the Configuration dropdown and enable **Raw Markdown mode**, and markdown text content will be syntax-highlighted and displayed instead of rich text.

<img className="shadow-md rounded-xl" width="1000" alt="Screenshot demonstrating raw markdown mode" src="https://mintcdn.com/piebald/Y7c9Eike1dfG2ddw/imgs/v0-1-20/raw_markdown_mode.png?fit=max&auto=format&n=Y7c9Eike1dfG2ddw&q=85&s=9a82b7e78a60392c59b13aca9cc76058" data-path="imgs/v0-1-20/raw_markdown_mode.png" />

### Using @pierre/diffs for file edit diffs

<Badge color="green">Available in [Piebald Pro](https://piebald.ai/pricing)</Badge>

By default, Piebald uses [Monaco editor](https://github.com/microsoft/monaco-editor), the same editor that powers VS Code, to render diffs when the model creates or edits files.  Here's an example:

<img className="shadow-md rounded-xl" width="700" alt="Screenshot of a diff rendered with Monaco editor" src="https://mintcdn.com/piebald/-AaSH-LxuVoxYcZl/imgs/v0-1-10/diff_monaco.png?fit=max&auto=format&n=-AaSH-LxuVoxYcZl&q=85&s=4e5130e05d3c3099b016ae3ef0f79fb6" data-path="imgs/v0-1-10/diff_monaco.png" />

With Piebald Pro, you can switch the library used for diff rendering to [`@pierre/diffs`](https://diffs.com/):

<img className="shadow-md rounded-xl" width="700" alt="Screenshot of a diff rendered with Diffs" src="https://mintcdn.com/piebald/-AaSH-LxuVoxYcZl/imgs/v0-1-10/diff_diffs.png?fit=max&auto=format&n=-AaSH-LxuVoxYcZl&q=85&s=7c5593322b90696d96c34750cca6f94f" data-path="imgs/v0-1-10/diff_diffs.png" />

To use Diffs, go to **Settings → Chat Interface** and under **Diff Library**, select **@pierre/diffs**.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.