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

   1 <script lang="ts">
   2         import { Card } from '$lib/components/ui/card';
   3         import { ChatAttachmentsList, MarkdownContent } from '$lib/components/app';
   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                 content,
  18                 attachments = [],
  19                 renderMarkdown = false,
  20                 textColorClass = 'text-foreground',
  21                 cardBgClass = 'dark:bg-primary/15',
  22                 maxHeightStyle = 'max-height: var(--max-message-height);'
  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                         return;
  35                 }
  36
  37                 const resizeObserver = new ResizeObserver((entries) => {
  38                         for (const entry of entries) {
  39                                 const element = entry.target as HTMLElement;
  40                                 const estimatedSingleLineHeight = 24; // Typical line height for text-md
  41
  42                                 isMultiline = element.offsetHeight > estimatedSingleLineHeight * 1.5;
  43                         }
  44                 });
  45
  46                 resizeObserver.observe(messageElement);
  47
  48                 return () => {
  49                         resizeObserver.disconnect();
  50                 };
  51         });
  52 </script>
  53
  54 {#if attachments && attachments.length > 0}
  55         <div class="mb-2 max-w-[80%]">
  56                 <ChatAttachmentsList {attachments} readonly imageHeight="h-40" />
  57         </div>
  58 {/if}
  59
  60 {#if content.trim()}
  61         <Card
  62                 class="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}"
  63                 data-multiline={isMultiline ? '' : undefined}
  64                 style="{maxHeightStyle} overflow-wrap: anywhere; word-break: break-word;"
  65         >
  66                 {#if renderMarkdown && currentConfig.renderUserContentAsMarkdown}
  67                         <div bind:this={messageElement}>
  68                                 <MarkdownContent class="markdown-user-content -my-4" {content} />
  69                         </div>
  70                 {:else}
  71                         <span bind:this={messageElement} class="text-md whitespace-pre-wrap">
  72                                 {content}
  73                         </span>
  74                 {/if}
  75         </Card>
  76 {/if}