Skip to content
This repository was archived by the owner on Jun 17, 2026. It is now read-only.

Commit 1d9c618

Browse files
montfortmontfort
authored
Merge pull request #8 from Enigmora/feature/welcome-screen
feat(chat): add welcome screen with interactive examples
2 parents fa87220 + f0f07d3 commit 1d9c618

9 files changed

Lines changed: 292 additions & 9 deletions

File tree

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,9 @@ Claudian is an Obsidian plugin that brings the power of Claude AI directly into
9090
### Chat with Claude
9191

9292
1. Open the panel with the command **"Open chat with Claude"** or from the ribbon
93-
2. Type your message and press `Enter`
94-
3. Responses will appear in real-time with streaming
93+
2. A welcome screen shows example prompts you can click to get started
94+
3. Type your message and press `Enter`
95+
4. Responses will appear in real-time with streaming
9596

9697
### Create notes from chat
9798

‎README_ES.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,9 @@ Claudian es un plugin de Obsidian que integra el poder de Claude AI directamente
9090
### Chat con Claude
9191

9292
1. Abre el panel con el comando **"Abrir chat con Claude"** o desde el ribbon
93-
2. Escribe tu mensaje y presiona `Enter`
94-
3. Las respuestas aparecerán en tiempo real con streaming
93+
2. Una pantalla de bienvenida muestra ejemplos de prompts que puedes clickear para empezar
94+
3. Escribe tu mensaje y presiona `Enter`
95+
4. Las respuestas aparecerán en tiempo real con streaming
9596

9697
### Crear notas desde el chat
9798

‎src/chat-view.ts‎

Lines changed: 91 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,9 @@ export class ChatView extends ItemView {
5454
private tokenIndicator: HTMLElement | null = null;
5555
private tokenUsageCleanup: (() => void) | null = null;
5656

57+
// Welcome Screen
58+
private welcomeScreen: HTMLElement | null = null;
59+
5760
constructor(leaf: WorkspaceLeaf, plugin: ClaudeCompanionPlugin) {
5861
super(leaf);
5962
this.plugin = plugin;
@@ -213,17 +216,94 @@ export class ChatView extends ItemView {
213216

214217
private restoreHistory(): void {
215218
const history = this.client.getHistory();
216-
history.forEach(msg => {
217-
this.renderMessage(msg.role, msg.content);
218-
});
219+
if (history.length === 0) {
220+
this.showWelcomeScreen();
221+
} else {
222+
history.forEach(msg => {
223+
this.renderMessage(msg.role, msg.content);
224+
});
225+
}
219226
}
220227

221228
private clearChat(): void {
222229
this.client.clearHistory();
223230
this.messagesContainer.empty();
231+
this.showWelcomeScreen();
224232
new Notice(t('chat.cleared'));
225233
}
226234

235+
private showWelcomeScreen(): void {
236+
// Remove existing welcome screen if any
237+
this.hideWelcomeScreen();
238+
239+
this.welcomeScreen = this.messagesContainer.createDiv({ cls: 'claudian-welcome' });
240+
241+
// Logo SVG
242+
const logoEl = this.welcomeScreen.createDiv({ cls: 'claudian-welcome-logo' });
243+
logoEl.innerHTML = `<svg width="64" height="64" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
244+
<path d="M150 35L236.6 75V185L150 265L63.4 185V75L150 35Z"
245+
stroke="var(--interactive-accent)"
246+
stroke-width="24"
247+
stroke-linejoin="round"/>
248+
<path d="M150 85C153.9 115 175 136.1 205 140C175 143.9 153.9 165 150 195C146.1 165 125 143.9 95 140C125 136.1 146.1 115 150 85Z"
249+
fill="var(--text-accent)"/>
250+
</svg>`;
251+
252+
// Title
253+
this.welcomeScreen.createEl('h2', {
254+
text: t('welcome.title'),
255+
cls: 'claudian-welcome-title'
256+
});
257+
258+
// Greeting
259+
this.welcomeScreen.createEl('p', {
260+
text: t('welcome.greeting'),
261+
cls: 'claudian-welcome-greeting'
262+
});
263+
264+
// Spacer
265+
this.welcomeScreen.createDiv({ cls: 'claudian-welcome-spacer' });
266+
267+
// Examples section
268+
const examplesEl = this.welcomeScreen.createDiv({ cls: 'claudian-welcome-examples' });
269+
examplesEl.createEl('p', {
270+
text: t('welcome.examplesHeader'),
271+
cls: 'claudian-welcome-examples-header'
272+
});
273+
274+
const examplesList = examplesEl.createEl('ul', { cls: 'claudian-welcome-examples-list' });
275+
const examples = [
276+
t('welcome.example1'),
277+
t('welcome.example2'),
278+
t('welcome.example3'),
279+
t('welcome.example4'),
280+
t('welcome.example5')
281+
];
282+
283+
examples.forEach(example => {
284+
const li = examplesList.createEl('li', { text: example });
285+
li.onclick = () => {
286+
// Remove quotes from example text
287+
const cleanText = example.replace(/^"|"$/g, '');
288+
this.inputEl.value = cleanText;
289+
this.inputEl.focus();
290+
};
291+
});
292+
293+
// Agent mode hint
294+
this.welcomeScreen.createEl('p', {
295+
text: t('welcome.agentModeHint'),
296+
cls: 'claudian-welcome-agent-hint'
297+
});
298+
}
299+
300+
private hideWelcomeScreen(): void {
301+
if (this.welcomeScreen) {
302+
this.welcomeScreen.remove();
303+
this.welcomeScreen = null;
304+
}
305+
}
306+
227307
private toggleAgentMode(toggleEl: HTMLElement): void {
228308
this.isAgentModeActive = !this.isAgentModeActive;
229309

@@ -256,6 +336,9 @@ export class ChatView extends ItemView {
256336
this.inputEl.value = '';
257337
this.inputEl.style.height = 'auto';
258338

339+
// Hide welcome screen if visible
340+
this.hideWelcomeScreen();
341+
259342
// Render user message
260343
this.renderMessage('user', message);
261344

@@ -1855,6 +1938,11 @@ ${completedActions}
18551938
historyLink.setText(t('tokens.historyLink'));
18561939
}
18571940
}
1941+
1942+
// Update welcome screen if visible
1943+
if (this.welcomeScreen) {
1944+
this.showWelcomeScreen();
1945+
}
18581946
}
18591947

18601948
private setupResizeHandle(

‎src/i18n/locales/en.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -727,7 +727,20 @@ VAULT CONTEXT:
727727
'settings.showTokens.desc': 'Display token usage in the chat footer.',
728728
'settings.section.tokenTracking': 'Token Tracking',
729729
'error.quotaExhausted': 'API quota exhausted. Check your usage limits at console.anthropic.com.',
730-
'error.billingIssue': 'Billing issue detected. Check your account at console.anthropic.com.'
730+
'error.billingIssue': 'Billing issue detected. Check your account at console.anthropic.com.',
731+
732+
// ═══════════════════════════════════════════════════════════════════════════
733+
// WELCOME SCREEN
734+
// ═══════════════════════════════════════════════════════════════════════════
735+
'welcome.title': 'Claudian',
736+
'welcome.greeting': 'How can I help you today?',
737+
'welcome.examplesHeader': 'Examples of what I can do:',
738+
'welcome.example1': '"Organize my productivity notes into folders by topic and create a linked index"',
739+
'welcome.example2': '"Find all notes with the #project tag and generate a concept map with their connections"',
740+
'welcome.example3': '"Read my Ideas.md note and suggest wikilinks to related notes"',
741+
'welcome.example4': '"Create a note with a summary of this week\'s meetings"',
742+
'welcome.example5': '"What notes do I have about artificial intelligence?"',
743+
'welcome.agentModeHint': 'Enable Agent Mode to create, modify and organize notes automatically.'
731744
};
732745

733746
export default translations;

‎src/i18n/locales/es.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -727,7 +727,20 @@ CONTEXTO DE LA BÓVEDA:
727727
'settings.showTokens.desc': 'Muestra el uso de tokens en el pie del chat.',
728728
'settings.section.tokenTracking': 'Seguimiento de Tokens',
729729
'error.quotaExhausted': 'Cuota de API agotada. Revisa tus límites en console.anthropic.com.',
730-
'error.billingIssue': 'Problema de facturación detectado. Revisa tu cuenta en console.anthropic.com.'
730+
'error.billingIssue': 'Problema de facturación detectado. Revisa tu cuenta en console.anthropic.com.',
731+
732+
// ═══════════════════════════════════════════════════════════════════════════
733+
// WELCOME SCREEN
734+
// ═══════════════════════════════════════════════════════════════════════════
735+
'welcome.title': 'Claudian',
736+
'welcome.greeting': '¿Cómo puedo ayudarte hoy?',
737+
'welcome.examplesHeader': 'Ejemplos de lo que puedo hacer:',
738+
'welcome.example1': '"Organiza mis notas sobre productividad en carpetas por tema y crea un índice enlazado"',
739+
'welcome.example2': '"Busca todas las notas con el tag #proyecto y genera un mapa conceptual con sus conexiones"',
740+
'welcome.example3': '"Lee mi nota de Ideas.md y sugiere wikilinks a otras notas relacionadas"',
741+
'welcome.example4': '"Crea una nota con un resumen de las reuniones de esta semana"',
742+
'welcome.example5': '"¿Qué notas tengo sobre inteligencia artificial?"',
743+
'welcome.agentModeHint': 'Activa el Modo Agente para crear, modificar y organizar notas automáticamente.'
731744
};
732745

733746
export default translations;

‎src/i18n/types.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -392,6 +392,19 @@ export type Translations = {
392392
'settings.section.tokenTracking': string;
393393
'error.quotaExhausted': string;
394394
'error.billingIssue': string;
395+
396+
// ═══════════════════════════════════════════════════════════════════════════
397+
// WELCOME SCREEN
398+
// ═══════════════════════════════════════════════════════════════════════════
399+
'welcome.title': string;
400+
'welcome.greeting': string;
401+
'welcome.examplesHeader': string;
402+
'welcome.example1': string;
403+
'welcome.example2': string;
404+
'welcome.example3': string;
405+
'welcome.example4': string;
406+
'welcome.example5': string;
407+
'welcome.agentModeHint': string;
395408
};
396409

397410
/**

‎styles.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2219,3 +2219,95 @@
22192219
border-top: 1px solid var(--background-modifier-border);
22202220
margin-top: 4px;
22212221
}
2222+
2223+
/* ═══════════════════════════════════════════════════════════════════════════
2224+
WELCOME SCREEN
2225+
═══════════════════════════════════════════════════════════════════════════ */
2226+
2227+
.claudian-welcome {
2228+
display: flex;
2229+
flex-direction: column;
2230+
align-items: center;
2231+
justify-content: center;
2232+
text-align: center;
2233+
padding: 40px 20px;
2234+
min-height: 100%;
2235+
background: transparent;
2236+
}
2237+
2238+
.claudian-welcome-logo {
2239+
margin-bottom: 16px;
2240+
opacity: 0.9;
2241+
}
2242+
2243+
.claudian-welcome-logo svg {
2244+
width: 64px;
2245+
height: 64px;
2246+
}
2247+
2248+
.claudian-welcome-title {
2249+
margin: 0 0 16px 0;
2250+
font-size: 24px;
2251+
font-weight: 600;
2252+
color: var(--text-normal);
2253+
}
2254+
2255+
.claudian-welcome-greeting {
2256+
margin: 0;
2257+
font-size: 16px;
2258+
color: var(--text-muted);
2259+
}
2260+
2261+
.claudian-welcome-spacer {
2262+
height: 32px;
2263+
}
2264+
2265+
.claudian-welcome-examples {
2266+
max-width: 400px;
2267+
width: 100%;
2268+
}
2269+
2270+
.claudian-welcome-examples-header {
2271+
margin: 0 0 12px 0;
2272+
font-size: 12px;
2273+
font-weight: 500;
2274+
color: var(--text-muted);
2275+
text-transform: uppercase;
2276+
letter-spacing: 0.5px;
2277+
}
2278+
2279+
.claudian-welcome-examples-list {
2280+
list-style: none;
2281+
margin: 0;
2282+
padding: 0;
2283+
text-align: left;
2284+
}
2285+
2286+
.claudian-welcome-examples-list li {
2287+
padding: 10px 14px;
2288+
margin-bottom: 8px;
2289+
font-size: 13px;
2290+
color: var(--text-muted);
2291+
background: var(--background-secondary);
2292+
border-radius: 8px;
2293+
border: 1px solid var(--background-modifier-border);
2294+
transition: all 0.15s ease;
2295+
cursor: pointer;
2296+
}
2297+
2298+
.claudian-welcome-examples-list li:last-child {
2299+
margin-bottom: 0;
2300+
}
2301+
2302+
.claudian-welcome-examples-list li:hover {
2303+
background: var(--background-modifier-hover);
2304+
color: var(--text-normal);
2305+
border-color: var(--interactive-accent);
2306+
}
2307+
2308+
.claudian-welcome-agent-hint {
2309+
margin: 24px 0 0 0;
2310+
font-size: 11px;
2311+
color: var(--text-faint);
2312+
max-width: 300px;
2313+
}

‎wiki/Features/Chat-Interface.es.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,37 @@ El panel de chat consiste en:
2626
| **Área de Mensajes** | Historial de conversación con scroll |
2727
| **Área de Entrada** | Entrada de texto redimensionable para tus mensajes |
2828
| **Botón Enviar/Detener** | Envía mensajes o detiene solicitudes en progreso |
29+
| **Pie de Tokens** | Muestra el uso de tokens de la sesión actual |
30+
31+
---
32+
33+
## Pantalla de Bienvenida
34+
35+
Cuando abres el chat sin historial de mensajes, se muestra una pantalla de bienvenida:
36+
37+
![Pantalla de Bienvenida](../images/welcome-screen.png)
38+
39+
### Elementos
40+
41+
- **Logo y título**: Marca de Claudian
42+
- **Saludo**: "¿Cómo puedo ayudarte hoy?"
43+
- **Ejemplos de prompts**: Ejemplos clickeables de tareas que puedes solicitar
44+
- **Indicación de Modo Agente**: Recordatorio sobre activar el Modo Agente para operaciones de bóveda
45+
46+
### Ejemplos Interactivos
47+
48+
La pantalla de bienvenida incluye 5 ejemplos de prompts ordenados por complejidad. **Haz clic en cualquier ejemplo** para copiarlo directamente al campo de entrada, luego envía o modifica según necesites.
49+
50+
Los ejemplos incluyen tareas como:
51+
- Organizar notas en carpetas
52+
- Generar mapas de conceptos
53+
- Sugerir wikilinks
54+
- Crear notas de resumen
55+
- Buscar por temas
56+
57+
### Soporte de Idiomas
58+
59+
La pantalla de bienvenida se actualiza automáticamente cuando cambias el idioma del plugin en Configuración.
2960

3061
---
3162

‎wiki/Features/Chat-Interface.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,37 @@ The chat panel consists of:
2626
| **Message Area** | Scrollable conversation history |
2727
| **Input Area** | Resizable text input for your messages |
2828
| **Send/Stop Button** | Sends messages or stops ongoing requests |
29+
| **Token Footer** | Shows token usage for current session |
30+
31+
---
32+
33+
## Welcome Screen
34+
35+
When you open the chat with no message history, a welcome screen is displayed:
36+
37+
![Welcome Screen](../images/welcome-screen.png)
38+
39+
### Elements
40+
41+
- **Logo and title**: Claudian branding
42+
- **Greeting**: "How can I help you today?"
43+
- **Example prompts**: Clickable examples of tasks you can ask
44+
- **Agent Mode hint**: Reminder about enabling Agent Mode for vault operations
45+
46+
### Interactive Examples
47+
48+
The welcome screen includes 5 example prompts ordered by complexity. **Click any example** to copy it directly to the input field, then send or modify as needed.
49+
50+
Examples include tasks like:
51+
- Organizing notes into folders
52+
- Generating concept maps
53+
- Suggesting wikilinks
54+
- Creating summary notes
55+
- Searching for topics
56+
57+
### Language Support
58+
59+
The welcome screen automatically updates when you change the plugin language in Settings.
2960

3061
---
3162

0 commit comments

Comments
 (0)