feat: renderer for selection context

theboxer · theboxer · commit 8f2818475ebf · 2025-04-17T11:24:29.000+02:00
diff --git a/_build/js/src/ui/icons/index.ts b/_build/js/src/ui/icons/index.ts
@@ -33,3 +33,5 @@ export const arrowRight = `<svg xmlns="http://www.w3.org/2000/svg" width="24" he
 export const bot = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg>`;
 
 export const sparkles = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg>`;
+
+export const textSelect = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-select"><path d="M14 21h1"></path><path d="M14 3h1"></path><path d="M19 3a2 2 0 0 1 2 2"></path><path d="M21 14v1"></path><path d="M21 19a2 2 0 0 1-2 2"></path><path d="M21 9v1"></path><path d="M3 14v1"></path><path d="M3 9v1"></path><path d="M5 21a2 2 0 0 1-2-2"></path><path d="M5 3a2 2 0 0 0-2 2"></path><path d="M7 12h10"></path><path d="M7 16h6"></path><path d="M7 8h8"></path><path d="M9 21h1"></path><path d="M9 3h1"></path></svg>`;
diff --git a/_build/js/src/ui/localChat/messageHandlers.ts b/_build/js/src/ui/localChat/messageHandlers.ts
@@ -8,17 +8,52 @@ import { globalState } from '../../globalState';
 import { lng } from '../../lng';
 import { confirmDialog } from '../cofirmDialog';
 import { icon } from '../dom/icon';
-import { copy, edit, plus, triangleError } from '../icons';
+import { copy, edit, plus, textSelect, triangleError } from '../icons';
 import { createElement, nlToBr } from '../utils';
 
 import type { LocalChatConfig } from './types';
 import type {
   AssistantMessage,
   Message,
   UpdatableHTMLElement,
+  UserAttachment,
   UserMessage,
+  UserMessageContext,
 } from '../../chatHistory';
 
+const contextRenderers: Record<string, undefined | ((context: UserMessageContext) => HTMLElement)> =
+  {
+    selection: (ctx) => {
+      const tooltipEl = createElement('span', 'tooltip', ctx.value, { tabIndex: -1 });
+      const btn = createElement('div', 'context', [icon(24, textSelect), tooltipEl], {
+        tabIndex: 0,
+      });
+
+      btn.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+          e.preventDefault();
+          const scrollAmount = 30;
+          tooltipEl.scrollTop += e.key === 'ArrowDown' ? scrollAmount : -scrollAmount;
+        }
+      });
+
+      return btn;
+    },
+  };
+
+const attachmentRenderers: Record<
+  string,
+  undefined | ((attachment: UserAttachment) => HTMLElement)
+> = {
+  image: (attachment) => {
+    return createElement(
+      'div',
+      'attachment imagePreview',
+      createElement('img', undefined, undefined, { src: attachment.value }),
+    );
+  },
+};
+
 export const addUserMessage = (msg: UserMessage) => {
   const messageWrapper: UpdatableHTMLElement<UserMessage> = createElement(
     'div',
@@ -29,33 +64,41 @@ export const addUserMessage = (msg: UserMessage) => {
   const messageElement = createElement('div', 'message user');
 
   const textContent = msg.content;
-  const imagesContent = [];
-
-  for (const attachment of msg.attachments ?? []) {
-    if (attachment.__type === 'image') {
-      imagesContent.push(attachment.value);
-    }
-  }
 
   const textDiv = createElement('div');
   textDiv.innerHTML = nlToBr(textContent);
   messageElement.appendChild(textDiv);
 
-  if (imagesContent.length > 0) {
-    const imageRow = createElement('div', 'imageRow');
+  const attachmentsWrapper = createElement('div', 'attachmentsWrapper');
+  const contextsWrapper = createElement('div', 'contextsWrapper');
 
-    for (const imgContent of imagesContent) {
-      const imageWrapper = createElement('div');
+  for (const attachment of msg.attachments ?? []) {
+    const renderer = attachmentRenderers[attachment.__type];
+    if (!renderer) {
+      continue;
+    }
 
-      const img = createElement('img');
-      img.src = imgContent;
+    attachmentsWrapper.appendChild(renderer(attachment));
+    if (!attachmentsWrapper.classList.contains('visible')) {
+      attachmentsWrapper.classList.add('visible');
+    }
+  }
 
-      imageWrapper.appendChild(img);
-      imageRow.appendChild(imageWrapper);
+  for (const context of msg.contexts ?? []) {
+    const renderer = context.renderer && contextRenderers[context.renderer];
+    if (!renderer) {
+      continue;
+    }
+
+    contextsWrapper.appendChild(renderer(context));
+    if (!contextsWrapper.classList.contains('visible')) {
+      contextsWrapper.classList.add('visible');
     }
-    messageElement.appendChild(imageRow);
   }
 
+  const inputAddons = createElement('div', 'inputAddons', [attachmentsWrapper, contextsWrapper]);
+  messageElement.appendChild(inputAddons);
+
   const actionsContainer = createElement('div', 'actions');
   actionsContainer.appendChild(
     createActionButton({
@@ -168,7 +211,7 @@ export const addAssistantMessage = (msg: AssistantMessage, config: LocalChatConf
         }
       }
 
-      return ''; // use external default escaping
+      return '';
     },
   });
 
diff --git a/_build/js/src/ui/localChat/modalInput.ts b/_build/js/src/ui/localChat/modalInput.ts
@@ -93,8 +93,12 @@ export const buildModalInput = (config: LocalChatConfig) => {
 
   inputWrapper.append(textarea, loading, sendBtn, stopBtn);
 
-  inputSection.append(buildModalInputAttachments(), inputWrapper);
-  inputSection.append(buildModalInputContexts(), inputWrapper);
+  const inputAddons = createElement('div', 'inputAddons', [
+    buildModalInputAttachments(),
+    buildModalInputContexts(),
+  ]);
+
+  inputSection.append(inputAddons, inputWrapper);
 
   const modeButtons: Button[] = [];
 
@@ -272,6 +276,7 @@ export const buildModalInput = (config: LocalChatConfig) => {
 
     if (imageFile) {
       await handleImageUpload(imageFile);
+      textarea.focus();
       return;
     }
 
@@ -281,6 +286,7 @@ export const buildModalInput = (config: LocalChatConfig) => {
 
       if (isRemote) {
         await handleImageUpload(remoteImageUrl, true);
+        textarea.focus();
         return;
       }
 
@@ -296,10 +302,12 @@ export const buildModalInput = (config: LocalChatConfig) => {
       } catch {
         addErrorMessage(lng('modai.error.failed_to_fetch_image'));
       }
+      textarea.focus();
       return;
     }
 
     addErrorMessage(lng('modai.error.only_image_files_are_allowed'));
+    textarea.focus();
   });
 
   textarea.addEventListener('paste', async (e) => {
diff --git a/_build/js/src/ui/localChat/modalInputAttachments.ts b/_build/js/src/ui/localChat/modalInputAttachments.ts
@@ -1,6 +1,9 @@
 import { globalState } from '../../globalState';
+import { button } from '../dom/button';
 import { applyStyles, createElement } from '../utils';
 
+import type { Button } from '../dom/button';
+
 export type AttachmentsWrapper = HTMLDivElement & {
   visible: boolean;
   show: () => void;
@@ -12,7 +15,7 @@ export type AttachmentsWrapper = HTMLDivElement & {
   attachments: Attachment[];
 };
 
-export type Attachment = HTMLDivElement & {
+export type Attachment = Button & {
   __type: 'image';
   value: string;
 };
@@ -80,19 +83,19 @@ const addImageAttachment = (src: string) => {
     globalState.modal.attachments.removeAttachments();
   }
 
-  const attachment = createElement('div', 'imagePreview') as Attachment;
+  const attachment = button(
+    [
+      createElement('img', undefined, '', { src }),
+      createElement('div', 'trigger', '×', { tabIndex: -1 }),
+    ],
+    () => {
+      globalState.modal.attachments.removeAttachment(attachment);
+    },
+    'attachment imagePreview',
+  ) as Attachment;
+
   attachment.__type = 'image';
   attachment.value = src;
 
-  const img = createElement('img', undefined, '', { src });
-  const removeBtn = createElement('button', undefined, '×');
-
-  removeBtn.addEventListener('click', (e: MouseEvent) => {
-    e.stopPropagation();
-    globalState.modal.attachments.removeAttachment(attachment);
-  });
-
-  attachment.append(img, removeBtn);
-
   globalState.modal.attachments.addAttachment(attachment);
 };
diff --git a/_build/js/src/ui/localChat/modalInputContext.ts b/_build/js/src/ui/localChat/modalInputContext.ts
@@ -1,4 +1,7 @@
 import { globalState } from '../../globalState';
+import { button } from '../dom/button';
+import { icon } from '../dom/icon';
+import { textSelect } from '../icons';
 import { applyStyles, createElement } from '../utils';
 
 import type { UserMessageContext } from '../../chatHistory';
@@ -18,9 +21,29 @@ export type Context = UserMessageContext & {
   el?: HTMLElement;
 };
 
-const contextRenderers: Record<string, undefined | (() => HTMLElement)> = {
-  selection: undefined,
-};
+const contextRenderers: Record<string, undefined | ((context: UserMessageContext) => HTMLElement)> =
+  {
+    selection: (ctx) => {
+      const tooltipEl = createElement('span', 'tooltip', ctx.value, { tabIndex: -1 });
+      const btn = button(
+        [icon(24, textSelect), tooltipEl, createElement('div', 'trigger', '×', { tabIndex: -1 })],
+        () => {
+          globalState.modal.context.removeContext(ctx);
+        },
+        'context',
+      );
+
+      btn.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+          e.preventDefault();
+          const scrollAmount = 30;
+          tooltipEl.scrollTop += e.key === 'ArrowDown' ? scrollAmount : -scrollAmount;
+        }
+      });
+
+      return btn;
+    },
+  };
 
 export const buildModalInputContexts = () => {
   const contextWrapper = createElement('div', 'contextsWrapper') as ContextWrapper;
@@ -58,12 +81,12 @@ export const buildModalInputContexts = () => {
   };
 
   contextWrapper.addContext = (context) => {
-    const index = contextWrapper.contexts.push(context);
+    const index = contextWrapper.contexts.push(context) - 1;
 
     const renderer = contextRenderers[context?.renderer || ''];
     if (renderer) {
       contextWrapper.show();
-      const el = renderer();
+      const el = renderer(context);
       contextWrapper.contexts[index].el = el;
       contextWrapper.appendChild(el);
     }
diff --git a/assets/components/modai/css/modai.css b/assets/components/modai/css/modai.css
diff --git a/assets/components/modai/js/modai.js b/assets/components/modai/js/modai.js
