Designing Chat UIs for interacting with AI

The art of subtle details, the thing that makes my favorite apps so delightful to use, is something that's been missing from the startup ecosystem.

The market is flooded with websites that are spun up using templates and UI kits. Everything looks and feels the same, and nothing feels special.

Meanwhile, as I reflect on the apps that I've chosen to use over the years, it's clear that every one of them has put a lot of thought into how to develop UIs that are delightful to use and optimized for their use case.

A few examples that come to mind are:

iTerm2 – the terminal app that I use every day. Specifically, I love the ability to split the terminal window into multiple panes, and the ability to broadcast input to multiple panes. It's one of those features that once you become proficient with it, it becomes a productivity multiplier.
Sublime - I love VSCode for the extension ecosystem, but nothing comes close to Sublime's multi-cursor feature. The intuitive ability to create multiple cursors, and the ability to move them around with keyboard shortcuts, is a game changer for making complicated edits.

Similarly, my thesis behind Glama is that the most adopted UIs for interacting with AI will be determined by the small details that make them delightful to use, as opposed to a large number of obscure features that everyone else try to market their similar apps with.

Perfecting Text Input

When designing Glama, I think less about what my competitors have done, and more about the worst/best parts of the chat UIs that we are already familiar with, e.g., Slack, Discord, and WhatsApp. In this post, I'll share a few examples of what I wished other chat UIs had thought about when designing their text inputs.

Indentation

This is one of the most frustrating things about Slack's UI.

If you've ever tried to indent text within a code block, tab button simply changes focus to the next input.

Meanwhile, the desired behavior is to indent the text when the cursor is within the code block.

tab indent — When the cursor is within a code block, the tab key indents the text.

It even works with selected text blocks that are within the code block.

tab indent selected — Selected text within a code block is indented. As expected, shift+tab unindents the text.

Additionally, I expect the tab key to function as expected outside of the code blocks.

default indent — When the cursor is not within a code block, the tab key changes focus to the next input.

It is a small detail, but in the absence of this behavior, I find myself copy-pasting code blocks into a code editor, making edits, and then having to manually copy-paste it back into the chat.

Shoutout to Discord for pioneering this behavior.

Auto Lists

Did you ever notice how when you are typing a list, the list items are automatically added?

A small detail, but it's a nice touch.

auto lists — Inserting a new line immediately after a list item will automatically add a new list item.

Similarly, you want indentation to work for lists.

auto indent lists — When the cursor is within a list, the tab key indents the list item.

Most existing chat apps (e.g., Slack, Discord) implement a version of this behavior, so we take it for granted. However, this isn't natively supported by the web, so it needs to be implemented, and as a result, it's often overlooked.

Broadcasting Input

I mention this feature in the context of iTerm2. In case of iTerm2, the use case is the ability to synchronize instructions across multiple terminals. In case of Glama, the use case is for talking with multiple AI models at once. When done right, it feels like a superpower.

Synchronizing input across multiple inputs.

synchronize input — When typing "Hello, World!", the input is synchronized across all inputs. In fact, any action (e.g. copy-paste) that changes the text in the input will be reflected in all other synchronized inputs.

Additionally, sharing the undo/redo context across inputs.

synchronize undo/redo — Notice that the active input is changed after typing "Hello, World!" Even when text is typed in under input, the synchronized inputs will be able to undo/redo the changes.

Without this feature, I would have to manually copy-paste the text from one chat input to another.

Copying Rich/Plain Text

Both Slack and Discord have a feature that allows users to copy text from web pages into the chat. However, they mostly strip out any formatting, e.g., bold, italic, and code blocks. Meanwhile, I frequently desire to be able to copy rich text and preserve the formatting (including links, tables, lists, etc.).

copy rich text — By default, text/html input is converted to markdown before pasting into the chat. User is instructed to use shift+cmd+v to paste the plain text version.

The way that Glama does it is by detecting when clipboard contains text/html and converting it to markdown before adding it to the chat.

Additionally, the ability to transform rich text sources into plain text.

copy plain text — Notice that shift+cmd+v pastes the plain text version of the text.

This is less relevant for tranditional chat interfaces, but in the context of AI chat, it allows using copy-paste to reference large documents without needing to use attachments or third-party services to transform documents to the desired format.

Backlog

The following is a list of features that I am actively working on, but have not yet implemented.

Mentions. Glama allows users to upload documents to the workspace and ask AI questions about them. This will add the ability to reference documents shared in the workspace using the mention syntax, e.g. @Terms of Service agreement.
Indentation preservation. Preserving the indentation level for the new line when working with indented text (like in code or nested lists).
Quote-block continuation. Just like the auto-expanding list example, but for quote blocks.
Auto markdown table-row addition. Just like the auto-expanding list example, but for tables.

What makes a UI special for you?

In this post, I've shared a few examples of what makes a delightful chat UI for me. You can try out Glama to experience it for yourself.

However, I realize that such preferences are deeply personal, and I am sure that there are many other factors that contribute to creating a delightful UI for a chat application.

What do you think? What are some of your favorite (or least favorite) examples of chat UI design? I'm eager to hear your thoughts! Share your thoughts with me either frank@glama.ai or on Discord.

Now, if you'll excuse me, I need to go obsess over the perfect shade of gray for the text input field...