obsidian-chat-uilisted
Install: claude install-skill hsb3/dotfiles-agents
# Obsidian Chat UI
Provides patterns for building chat and copilot-style interfaces in Obsidian plugins using ItemView for sidebar panels with streaming message support.
## ItemView Pattern
Chat interfaces in Obsidian use `ItemView` for sidebar panels:
```typescript
import { ItemView, WorkspaceLeaf } from 'obsidian';
export const VIEW_TYPE_CHAT = 'my-plugin-chat';
export class ChatView extends ItemView {
private plugin: MyPlugin;
constructor(leaf: WorkspaceLeaf, plugin: MyPlugin) {
super(leaf);
this.plugin = plugin;
}
getViewType(): string {
return VIEW_TYPE_CHAT;
}
getDisplayText(): string {
return 'Chat';
}
getIcon(): string {
return 'message-square'; // Lucide icon name
}
async onOpen(): Promise<void> {
// Build UI here
}
async onClose(): Promise<void> {
// Cleanup (mostly automatic)
}
}
```
### Registering the View
In `main.ts`:
```typescript
async onload() {
this.registerView(
VIEW_TYPE_CHAT,
(leaf) => new ChatView(leaf, this)
);
this.addCommand({
id: 'open-chat',
name: 'Open chat',
callback: () => {
void this.activateView();
}
});
this.addRibbonIcon('message-square', 'Open chat', () => {
void this.activateView();
});
}
async activateView(): Promise<void> {
const { workspace } = this.app;
let leaf = workspace.getLeavesOfType(VIEW_TYPE_CHAT)[0];
if (!leaf) {
const rightLeaf = workspace.getRightLeaf(false);
if (rightLeaf) {
await right