tlrd-extension 1.0.0

package/src/app/styles/layout.css

@@ -0,0 +1,49 @@
+@layer components {
+  .app {
+    @apply min-h-screen bg-surface-50 text-surface-900 font-sans;
+  }
+
+  .app__header {
+    @apply bg-white border-b border-surface-200 px-6 py-4 flex items-center justify-between sticky top-0 z-10;
+  }
+
+  .app__logo {
+    @apply text-xl font-bold text-primary-700 tracking-tight flex items-center gap-2;
+  }
+
+  .app__logo-icon {
+    @apply w-7 h-7 text-primary-500;
+  }
+
+  .app__settings-btn {
+    @apply p-2 rounded-lg text-surface-500 hover:text-surface-700 hover:bg-surface-100 transition-colors;
+  }
+
+  .app__body {
+    @apply max-w-3xl mx-auto px-4 py-8 flex flex-col gap-6;
+  }
+
+  .app__actions {
+    @apply flex gap-3 items-center;
+  }
+
+  .btn {
+    @apply px-5 py-2.5 rounded-xl font-medium text-sm transition-all duration-200 cursor-pointer inline-flex items-center gap-2;
+  }
+
+  .btn--primary {
+    @apply bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 shadow-sm shadow-primary-200;
+  }
+
+  .btn--primary:disabled {
+    @apply bg-surface-300 text-surface-500 cursor-not-allowed shadow-none;
+  }
+
+  .btn--secondary {
+    @apply bg-white text-surface-700 border border-surface-300 hover:bg-surface-50 hover:border-surface-400;
+  }
+
+  .btn--icon {
+    @apply p-2 rounded-lg;
+  }
+}

package/src/app/styles/loader.css

@@ -0,0 +1,31 @@
+@layer components {
+  .loader {
+    @apply flex items-center justify-center py-8 gap-2;
+  }
+
+  .loader__dot {
+    @apply w-2 h-2 rounded-full bg-primary-400;
+    animation: loader-bounce 1.4s ease-in-out infinite both;
+  }
+
+  .loader__dot:nth-child(1) {
+    animation-delay: -0.32s;
+  }
+
+  .loader__dot:nth-child(2) {
+    animation-delay: -0.16s;
+  }
+
+  .loader__dot:nth-child(3) {
+    animation-delay: 0s;
+  }
+}
+
+@keyframes loader-bounce {
+  0%, 80%, 100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}

package/src/app/styles/message.css

@@ -0,0 +1,37 @@
+@layer components {
+  .message {
+    @apply flex flex-col gap-1;
+  }
+
+  .message--user {
+    @apply items-end;
+  }
+
+  .message--assistant {
+    @apply items-start;
+  }
+
+  .message__role {
+    @apply text-xs font-medium uppercase tracking-wider;
+  }
+
+  .message--user .message__role {
+    @apply text-primary-500;
+  }
+
+  .message--assistant .message__role {
+    @apply text-surface-400;
+  }
+
+  .message__bubble {
+    @apply text-sm leading-relaxed max-w-[85%] rounded-2xl px-4 py-3 whitespace-pre-wrap;
+  }
+
+  .message--user .message__bubble {
+    @apply bg-primary-600 text-white rounded-br-md;
+  }
+
+  .message--assistant .message__bubble {
+    @apply bg-surface-100 text-surface-800 rounded-bl-md;
+  }
+}

package/src/app/styles/scrollbar.css

@@ -0,0 +1,17 @@
+@layer components {
+  .custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    @apply bg-surface-300 rounded-full;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    @apply bg-surface-400;
+  }
+}

package/src/app/styles/settings.css

@@ -0,0 +1,55 @@
+@layer components {
+  .settings {
+    @apply bg-white rounded-2xl border border-surface-200 p-6 shadow-sm flex flex-col gap-4;
+  }
+
+  .settings__title {
+    @apply text-base font-semibold text-surface-800 mb-4 flex items-center gap-2;
+  }
+
+  .settings__title-icon {
+    @apply w-5 h-5 text-surface-400;
+  }
+
+  .settings__field {
+    @apply flex flex-col gap-2;
+  }
+
+  .settings__label {
+    @apply text-sm font-medium text-surface-600;
+  }
+
+  .settings__input-wrap {
+    @apply flex gap-2;
+  }
+
+  .settings__input {
+    @apply flex-1 px-4 py-2.5 rounded-xl border border-surface-300 bg-surface-50 text-sm text-surface-800 placeholder-surface-400
+           focus:outline-none focus:ring-2 focus:ring-primary-200 focus:border-primary-400 transition-all;
+  }
+
+  .settings__save-btn {
+    @apply btn btn--primary;
+  }
+
+  .settings__status {
+    @apply text-xs mt-2 font-medium;
+  }
+
+  .settings__status--saved {
+    @apply text-green-600;
+  }
+
+  .settings__status--error {
+    @apply text-red-500;
+  }
+
+  .settings__link {
+    @apply text-xs text-primary-600 hover:text-primary-700 underline;
+  }
+
+  .settings__select {
+    @apply w-full px-4 py-2.5 rounded-xl border border-surface-300 bg-surface-50 text-sm text-surface-800
+           focus:outline-none focus:ring-2 focus:ring-primary-200 focus:border-primary-400 transition-all cursor-pointer;
+  }
+}

package/src/app/styles/tldr.css

@@ -0,0 +1,49 @@
+@layer components {
+  .tldr {
+    @apply bg-white rounded-2xl border border-surface-200 shadow-sm overflow-hidden;
+  }
+
+  .tldr__header {
+    @apply px-6 py-4 border-b border-surface-100 flex items-center justify-between;
+  }
+
+  .tldr__title {
+    @apply text-sm font-semibold text-surface-700 uppercase tracking-wider;
+  }
+
+  .tldr__meta {
+    @apply flex items-center gap-3;
+  }
+
+  .tldr__page-title {
+    @apply text-xs text-surface-400 truncate max-w-xs;
+  }
+
+  .tldr__original-link {
+    @apply text-xs text-primary-500 hover:text-primary-700 underline whitespace-nowrap;
+  }
+
+  .tldr__body {
+    @apply px-6 py-5;
+  }
+
+  .tldr__content {
+    @apply text-sm leading-relaxed text-surface-700 whitespace-pre-wrap;
+  }
+
+  .tldr__empty {
+    @apply text-center py-12;
+  }
+
+  .tldr__empty-icon {
+    @apply text-4xl mb-3;
+  }
+
+  .tldr__empty-text {
+    @apply text-sm text-surface-400;
+  }
+
+  .tldr__error {
+    @apply text-sm text-red-500 bg-red-50 rounded-xl px-4 py-3;
+  }
+}

package/src/app/templates/app-header.hbs

@@ -0,0 +1,28 @@
+<header class="app__header">
+  <div class="app__logo">
+    <svg class="app__logo-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+    </svg>
+    TLDR
+  </div>
+  <div class="app__actions">
+    <div data-region="lang-selector"></div>
+    <button class="btn btn--primary" data-action="summarize" {{#unless hasApiKey}}disabled{{/unless}}>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:16px;height:16px;">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
+      </svg>
+      {{t "app.btn.summarize"}}
+    </button>
+    <button class="app__settings-btn" data-action="toggle-settings" title="{{t "popup.settings"}}">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:20px;height:20px;">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+      </svg>
+    </button>
+  </div>
+</header>
+<main class="app__body">
+  <div data-region="settings" {{#unless settingsVisible}}style="display:none"{{/unless}}></div>
+  <div data-region="tldr"></div>
+  <div data-region="chat"></div>
+</main>

package/src/app/templates/chat.hbs

@@ -0,0 +1,22 @@
+<div class="chat__header">
+  <span class="chat__title">{{t "app.chat.title"}}</span>
+</div>
+<div class="chat__messages custom-scrollbar" data-region="messages">
+  {{#unless hasMessages}}
+    <div class="chat__empty">{{t "app.chat.empty"}}</div>
+  {{/unless}}
+</div>
+<div class="chat__input-wrap">
+  <textarea
+    class="chat__input"
+    placeholder="{{t "app.chat.placeholder"}}"
+    rows="1"
+    data-input="question"
+    {{#if disabled}}disabled{{/if}}
+  ></textarea>
+  <button class="chat__send-btn" data-action="send" {{#if disabled}}disabled{{/if}}>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:18px;height:18px;">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+    </svg>
+  </button>
+</div>

package/src/app/templates/language-selector.hbs

@@ -0,0 +1,16 @@
+<label class="lang-selector__field">
+  <span class="lang-selector__label">{{t "app.lang.summary"}}</span>
+  <select class="lang-selector__select" data-action="change-summary-lang">
+    {{#each summaryLanguages}}
+      <option value="{{this.code}}" {{#if this.selected}}selected{{/if}}>{{this.nativeLabel}}</option>
+    {{/each}}
+  </select>
+</label>
+<label class="lang-selector__field">
+  <span class="lang-selector__label">{{t "app.lang.ui"}}</span>
+  <select class="lang-selector__select" data-action="change-ui-lang">
+    {{#each uiLanguages}}
+      <option value="{{this.code}}" {{#if this.selected}}selected{{/if}}>{{this.nativeLabel}}</option>
+    {{/each}}
+  </select>
+</label>

package/src/app/templates/message.hbs

@@ -0,0 +1,2 @@
+<span class="message__role">{{roleLabel}}</span>
+<div class="message__bubble">{{content}}</div>

package/src/app/templates/settings.hbs

@@ -0,0 +1,31 @@
+<div class="settings__title">
+  <svg class="settings__title-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z" />
+  </svg>
+  {{t "app.settings.title"}}
+</div>
+<div class="settings__field">
+  <label class="settings__label" for="api-key">{{t "app.settings.label"}}</label>
+  <div class="settings__input-wrap">
+    <input
+      class="settings__input"
+      id="api-key"
+      type="password"
+      placeholder="sk-..."
+      value="{{apiKey}}"
+    />
+    <button class="settings__save-btn" data-action="save">{{t "app.settings.save"}}</button>
+  </div>
+  <a class="settings__link" href="https://platform.openai.com/api-keys" target="_blank" rel="noopener">{{t "app.settings.link"}}</a>
+  {{#if status}}
+    <div class="settings__status settings__status--{{statusType}}">{{status}}</div>
+  {{/if}}
+</div>
+<div class="settings__field">
+  <label class="settings__label" for="model-select">{{t "app.settings.model"}}</label>
+  <select class="settings__select" id="model-select" data-action="change-model">
+    {{#each models}}
+      <option value="{{this.id}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
+    {{/each}}
+  </select>
+</div>

package/src/app/templates/tldr.hbs

@@ -0,0 +1,29 @@
+<div class="tldr__header">
+  <span class="tldr__title">{{t "app.tldr.title"}}</span>
+  <div class="tldr__meta">
+    {{#if pageTitle}}
+      <span class="tldr__page-title" title="{{pageTitle}}">{{pageTitle}}</span>
+    {{/if}}
+    {{#if pageUrl}}
+      <a class="tldr__original-link" href="{{pageUrl}}" target="_blank" rel="noopener">{{t "app.tldr.original"}}</a>
+    {{/if}}
+  </div>
+</div>
+<div class="tldr__body">
+  {{#if loading}}
+    <div class="loader">
+      <div class="loader__dot"></div>
+      <div class="loader__dot"></div>
+      <div class="loader__dot"></div>
+    </div>
+  {{else if error}}
+    <div class="tldr__error">{{error}}</div>
+  {{else if tldr}}
+    <div class="tldr__content">{{tldr}}</div>
+  {{else}}
+    <div class="tldr__empty">
+      <div class="tldr__empty-icon">&#128196;</div>
+      <div class="tldr__empty-text">{{t "app.tldr.empty"}}</div>
+    </div>
+  {{/if}}
+</div>

package/src/app/views/AppView.ts

@@ -0,0 +1,179 @@
+import { View } from 'ostovjs';
+import template from '../templates/app-header.hbs';
+import SettingsView from './SettingsView';
+import TldrView from './TldrView';
+import ChatView from './ChatView';
+import LanguageSelectorView from './LanguageSelectorView';
+import OpenAIService from '../services/openai';
+import { setLocale } from '../../shared/i18n';
+import type { SupportedLocale } from '../../shared/i18n/locales';
+import type SettingsModel from '../models/SettingsModel';
+import type PageModel from '../models/PageModel';
+import type MessagesCollection from '../models/MessagesCollection';
+
+interface AppViewOptions {
+  settingsModel: SettingsModel;
+  pageModel: PageModel;
+  messagesCollection: MessagesCollection;
+}
+
+class AppView extends View {
+  private settingsModel!: SettingsModel;
+  declare pageModel: PageModel;
+  private messagesCollection!: MessagesCollection;
+  private openai!: OpenAIService;
+  private settingsView!: SettingsView;
+  private tldrView!: TldrView;
+  private chatView!: ChatView;
+  private langSelectorView!: LanguageSelectorView;
+  private _settingsVisible = false;
+
+  constructor(options: AppViewOptions) {
+    super({
+      ...options,
+      el: '#app',
+      events: {
+        'click [data-action=summarize]': 'onSummarize',
+        'click [data-action=toggle-settings]': 'onToggleSettings',
+      },
+    });
+  }
+
+  initialize(options: AppViewOptions) {
+    this.settingsModel = options.settingsModel;
+    this.pageModel = options.pageModel;
+    this.messagesCollection = options.messagesCollection;
+
+    this.openai = new OpenAIService(this.settingsModel);
+
+    this.settingsView = new SettingsView({ model: this.settingsModel });
+    this.tldrView = new TldrView({ model: this.pageModel });
+    this.chatView = new ChatView({ collection: this.messagesCollection });
+    this.langSelectorView = new LanguageSelectorView({ model: this.settingsModel });
+
+    this.listenTo(this.chatView, 'ask', this.onAskQuestion);
+    this.listenTo(this.settingsModel, 'saved', this.onSettingsSaved);
+    this.listenTo(this.langSelectorView, 'locale-changed', this.onLocaleChanged);
+
+    this._settingsVisible = !this.settingsModel.hasApiKey();
+  }
+
+  render() {
+    this._settingsVisible = !this.settingsModel.hasApiKey();
+
+    const el = this.el as HTMLElement;
+    el.innerHTML = template({
+      hasApiKey: this.settingsModel.hasApiKey(),
+      settingsVisible: this._settingsVisible,
+      hasTldr: this.pageModel.hasTldr(),
+    });
+
+    el.querySelector('[data-region=settings]')!.appendChild(
+      this.settingsView.render().el as HTMLElement
+    );
+    el.querySelector('[data-region=tldr]')!.appendChild(
+      this.tldrView.render().el as HTMLElement
+    );
+    el.querySelector('[data-region=chat]')!.appendChild(
+      this.chatView.render().el as HTMLElement
+    );
+    el.querySelector('[data-region=lang-selector]')!.appendChild(
+      this.langSelectorView.render().el as HTMLElement
+    );
+
+    return this;
+  }
+
+  onSettingsSaved() {
+    const el = this.el as HTMLElement;
+    const btn = el.querySelector<HTMLButtonElement>('[data-action=summarize]');
+    if (btn) btn.disabled = !this.settingsModel.hasApiKey();
+  }
+
+  onLocaleChanged(locale: string) {
+    setLocale(locale as SupportedLocale);
+    this.render();
+  }
+
+  onToggleSettings() {
+    this._settingsVisible = !this._settingsVisible;
+    const el = this.el as HTMLElement;
+    const settingsRegion = el.querySelector<HTMLElement>('[data-region=settings]')!;
+    settingsRegion.style.display = this._settingsVisible ? '' : 'none';
+  }
+
+  async onSummarize() {
+    const el = this.el as HTMLElement;
+
+    if (!this.settingsModel.hasApiKey()) {
+      this._settingsVisible = true;
+      el.querySelector<HTMLElement>('[data-region=settings]')!.style.display = '';
+      return;
+    }
+
+    if (this.pageModel.get('loading')) return;
+
+    if (!this.pageModel.hasContent()) {
+      this.pageModel.set('error', 'No page content available. Open this from the extension popup.');
+      return;
+    }
+
+    this.pageModel.set({ loading: true, error: '', tldr: '' });
+
+    try {
+      const language = this.settingsModel.get('summaryLanguage');
+      const tldr = await this.openai.generateTldrStream(
+        this.pageModel.get('content'),
+        this.pageModel.get('title'),
+        language,
+        (text) => {
+          if (this.pageModel.get('loading')) {
+            this.pageModel.set({ loading: false, tldr: text }, { silent: true });
+            this.tldrView.render();
+          } else {
+            this.tldrView.updateContent(text);
+          }
+        }
+      );
+      this.pageModel.set({ tldr, loading: false });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Unknown error';
+      this.pageModel.set({ error: message, loading: false });
+    }
+  }
+
+  async onAskQuestion(question: string) {
+    this.messagesCollection.add({ role: 'user', content: question });
+    this.chatView.setDisabled(true);
+
+    const assistantMsg = this.messagesCollection.add({ role: 'assistant', content: '...' });
+
+    try {
+      const language = this.settingsModel.get('summaryLanguage');
+      const messagesForApi = this.messagesCollection.toOpenAIFormat().slice(0, -1);
+
+      const answer = await this.openai.askFollowUpStream(
+        messagesForApi,
+        this.pageModel.get('content'),
+        this.pageModel.get('tldr'),
+        language,
+        (text) => {
+          (assistantMsg as any).set('content', text, { silent: true });
+          const lastView = this.chatView.getLastMessageView();
+          if (lastView) lastView.updateContent(text);
+          this.chatView.scrollToBottom();
+        }
+      );
+      (assistantMsg as any).set('content', answer);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Unknown error';
+      (assistantMsg as any).set('content', `Error: ${message}`);
+    }
+
+    this.chatView.setDisabled(false);
+    const el = this.el as HTMLElement;
+    el.querySelector<HTMLTextAreaElement>('[data-input=question]')?.focus();
+  }
+}
+
+export default AppView;

package/src/app/views/ChatView.ts

@@ -0,0 +1,95 @@
+import { View } from 'ostovjs';
+import template from '../templates/chat.hbs';
+import MessageView from './MessageView';
+import type MessageModel from '../models/MessageModel';
+import type MessagesCollection from '../models/MessagesCollection';
+
+class ChatView extends View {
+  declare collection: MessagesCollection;
+  private _disabled = false;
+  private _lastMessageView: MessageView | null = null;
+
+  constructor(options: { collection: MessagesCollection }) {
+    super({
+      ...options,
+      tagName: 'div',
+      className: 'chat',
+      events: {
+        'click [data-action=send]': 'onSend',
+        'keydown [data-input=question]': 'onKeydown',
+      },
+    });
+  }
+
+  initialize() {
+    this.listenTo(this.collection, 'add', this.onMessageAdded);
+  }
+
+  render() {
+    const el = this.el as HTMLElement;
+    el.innerHTML = template({
+      hasMessages: this.collection.length > 0,
+      disabled: this._disabled,
+    });
+
+    const messagesEl = el.querySelector('[data-region=messages]')!;
+    this.collection.models.forEach((msg: MessageModel) => {
+      const view = new MessageView({ model: msg });
+      messagesEl.appendChild(view.render().el as HTMLElement);
+    });
+
+    return this;
+  }
+
+  onMessageAdded(msg: MessageModel) {
+    const el = this.el as HTMLElement;
+    const messagesEl = el.querySelector('[data-region=messages]')!;
+    const emptyEl = messagesEl.querySelector('.chat__empty');
+    if (emptyEl) emptyEl.remove();
+
+    const view = new MessageView({ model: msg });
+    messagesEl.appendChild(view.render().el as HTMLElement);
+    messagesEl.scrollTop = messagesEl.scrollHeight;
+    this._lastMessageView = view;
+  }
+
+  getLastMessageView(): MessageView | null {
+    return this._lastMessageView;
+  }
+
+  scrollToBottom() {
+    const el = this.el as HTMLElement;
+    const messagesEl = el.querySelector('[data-region=messages]');
+    if (messagesEl) messagesEl.scrollTop = messagesEl.scrollHeight;
+  }
+
+  onKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      this.onSend();
+    }
+  }
+
+  onSend() {
+    if (this._disabled) return;
+
+    const el = this.el as HTMLElement;
+    const input = el.querySelector<HTMLTextAreaElement>('[data-input=question]');
+    const question = input?.value.trim();
+    if (!question) return;
+
+    if (input) input.value = '';
+    this.trigger('ask', question);
+  }
+
+  setDisabled(disabled: boolean) {
+    this._disabled = disabled;
+    const el = this.el as HTMLElement;
+    const input = el.querySelector<HTMLTextAreaElement>('[data-input=question]');
+    const btn = el.querySelector<HTMLButtonElement>('[data-action=send]');
+    if (input) input.disabled = disabled;
+    if (btn) btn.disabled = disabled;
+  }
+}
+
+export default ChatView;