git.djapps.eu Git - pkg/ggml/sources/llama.cpp/blob

   1 <script lang="ts">
   2         import { ChatAttachmentsList, MarkdownContent, MentionText } from '$lib/components/app';
   3         import { Card } from '$lib/components/ui/card';
   4         import { config } from '$lib/stores/settings.svelte';
   5         import type { DatabaseMessageExtra } from '$lib/types/database';
   6
   7         interface Props {
   8                 content: string;
   9                 attachments?: DatabaseMessageExtra[];
  10                 renderMarkdown?: boolean;
  11                 textColorClass?: string;
  12                 cardBgClass?: string;
  13                 maxHeightStyle?: string;
  14         }
  15
  16         let {
  17                 attachments = [],
  18                 cardBgClass = 'dark:bg-primary/15',
  19                 content,
  20                 maxHeightStyle = '',
  21                 renderMarkdown = false,
  22                 textColorClass = 'text-foreground'
  23         }: Props = $props();
  24
  25         let isMultiline = $state(false);
  26         let messageElement: HTMLElement | undefined = $state();
  27         const currentConfig = config();
  28
  29         $effect(() => {
  30                 if (!messageElement || !content.trim()) return;
  31
  32                 if (content.includes('\n')) {
  33                         isMultiline = true;
  34
  35                         return;
  36                 }
  37
  38                 const resizeObserver = new ResizeObserver((entries) => {
  39                         for (const entry of entries) {
  40                                 const element = entry.target as HTMLElement;
  41                                 const estimatedSingleLineHeight = 24; // Typical line height for text-md
  42
  43                                 isMultiline = element.offsetHeight > estimatedSingleLineHeight * 1.5;
  44                         }
  45                 });
  46
  47                 resizeObserver.observe(messageElement);
  48
  49                 return () => {
  50                         resizeObserver.disconnect();
  51                 };
  52         });
  53 </script>
  54
  55 {#if attachments && attachments.length > 0}
  56         <div class="mb-2 max-w-[80%]">
  57                 <ChatAttachmentsList {attachments} readonly imageHeight="h-40" />
  58         </div>
  59 {/if}
  60
  61 {#if content.trim()}
  62         <Card
  63                 class="chat-message-user-bubble max-w-[80%] overflow-y-auto rounded-[1.125rem] border-none bg-primary/5 px-3.75 py-1.5 {textColorClass} backdrop-blur-md data-multiline:py-2.5 {cardBgClass}"
  64                 data-multiline={isMultiline ? '' : undefined}
  65                 style="{maxHeightStyle} overflow-wrap: anywhere; word-break: break-word;"
  66         >
  67                 {#if renderMarkdown && currentConfig.renderUserContentAsMarkdown}
  68                         <div bind:this={messageElement}>
  69                                 <MarkdownContent class="markdown-user-content" {content} />
  70                         </div>
  71                 {:else}
  72                         <span bind:this={messageElement} class="text-md whitespace-pre-wrap"
  73                                 ><MentionText {content} /></span
  74                         >
  75                 {/if}
  76         </Card>
  77 {/if}