refac
This commit is contained in:
Timothy Jaeryang Baek
@@ -1,5 +1,4 @@
|
||||
<script lang="ts">
|
||||
import dayjs from 'dayjs';
|
||||
import { onMount, tick, getContext } from 'svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
@@ -16,12 +15,11 @@
|
||||
import Markdown from './Markdown.svelte';
|
||||
import Name from './Name.svelte';
|
||||
import Skeleton from './Skeleton.svelte';
|
||||
import localizedFormat from 'dayjs/plugin/localizedFormat';
|
||||
import ProfileImage from './ProfileImage.svelte';
|
||||
import { WEBUI_BASE_URL } from '$lib/constants';
|
||||
import equal from 'fast-deep-equal';
|
||||
import { formatMessageTimestamp, formatMessageTimestampFull } from '$lib/utils';
|
||||
const i18n = getContext('i18n');
|
||||
dayjs.extend(localizedFormat);
|
||||
|
||||
export let chatId;
|
||||
export let history;
|
||||
@@ -402,14 +400,6 @@
|
||||
<div class="w-full rounded-xl pl-5 pr-2 py-2 mt-2">
|
||||
<Name>
|
||||
{$i18n.t('Merged Response')}
|
||||
|
||||
{#if message.timestamp}
|
||||
<span
|
||||
class=" self-center invisible group-hover:visible text-gray-400 text-xs font-medium uppercase ml-0.5 -mt-0.5"
|
||||
>
|
||||
{dayjs(message.timestamp * 1000).format('LT')}
|
||||
</span>
|
||||
{/if}
|
||||
</Name>
|
||||
|
||||
<div class="mt-1 markdown-prose w-full min-w-full">
|
||||
@@ -419,6 +409,23 @@
|
||||
<Markdown id={`merged`} content={message.content ?? ''} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if message.timestamp}
|
||||
<div class="mt-0.5 flex justify-start text-gray-600 dark:text-gray-500">
|
||||
<Tooltip
|
||||
className="flex self-center"
|
||||
content={formatMessageTimestampFull(message.timestamp * 1000)}
|
||||
placement="bottom"
|
||||
>
|
||||
<time
|
||||
datetime={new Date(message.timestamp * 1000).toISOString()}
|
||||
class="invisible group-hover:visible ml-1 text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
|
||||
>
|
||||
{formatMessageTimestamp(message.timestamp * 1000)}
|
||||
</time>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import { createEventDispatcher, onDestroy } from 'svelte';
|
||||
import { onMount, tick, getContext } from 'svelte';
|
||||
@@ -32,7 +31,8 @@
|
||||
getMessageContentParts,
|
||||
sanitizeResponseContent,
|
||||
createMessagesList,
|
||||
formatDate,
|
||||
formatMessageTimestamp,
|
||||
formatMessageTimestampFull,
|
||||
removeDetails,
|
||||
removeAllDetails
|
||||
} from '$lib/utils';
|
||||
@@ -668,24 +668,6 @@
|
||||
{model?.name ?? message.model}
|
||||
</span>
|
||||
</Tooltip>
|
||||
|
||||
{#if message.timestamp}
|
||||
<div
|
||||
class="self-center text-xs font-medium first-letter:capitalize ml-0.5 translate-y-[1px] {($settings?.highContrastMode ??
|
||||
false)
|
||||
? 'dark:text-gray-100 text-gray-900'
|
||||
: 'invisible group-hover:visible transition text-gray-400'}"
|
||||
>
|
||||
<Tooltip content={dayjs(message.timestamp * 1000).format('LLLL')}>
|
||||
<span class="line-clamp-1"
|
||||
>{$i18n.t(formatDate(message.timestamp * 1000), {
|
||||
LOCALIZED_TIME: dayjs(message.timestamp * 1000).format('LT'),
|
||||
LOCALIZED_DATE: dayjs(message.timestamp * 1000).format('L')
|
||||
})}</span
|
||||
>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{/if}
|
||||
</Name>
|
||||
|
||||
<div>
|
||||
@@ -1496,6 +1478,21 @@
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/each}
|
||||
|
||||
{#if message.timestamp}
|
||||
<Tooltip
|
||||
className="flex self-center"
|
||||
content={formatMessageTimestampFull(message.timestamp * 1000)}
|
||||
placement="bottom"
|
||||
>
|
||||
<time
|
||||
datetime={new Date(message.timestamp * 1000).toISOString()}
|
||||
class="invisible group-hover:visible ml-1 text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
|
||||
>
|
||||
{formatMessageTimestamp(message.timestamp * 1000)}
|
||||
</time>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
<script lang="ts">
|
||||
import dayjs from 'dayjs';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { tick, getContext, onMount } from 'svelte';
|
||||
|
||||
import { models, settings } from '$lib/stores';
|
||||
import { user as _user } from '$lib/stores';
|
||||
import { copyToClipboard as _copyToClipboard, formatDate } from '$lib/utils';
|
||||
import {
|
||||
copyToClipboard as _copyToClipboard,
|
||||
formatMessageTimestamp,
|
||||
formatMessageTimestampFull
|
||||
} from '$lib/utils';
|
||||
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
|
||||
import equal from 'fast-deep-equal';
|
||||
|
||||
@@ -18,10 +21,7 @@
|
||||
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
|
||||
import SubagentResultRow from './SubagentResultRow.svelte';
|
||||
|
||||
import localizedFormat from 'dayjs/plugin/localizedFormat';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
dayjs.extend(localizedFormat);
|
||||
type SubagentResult = {
|
||||
async_subagent_result: true;
|
||||
delegation_id?: string;
|
||||
@@ -165,48 +165,8 @@
|
||||
{:else}
|
||||
{$i18n.t('You')}
|
||||
{/if}
|
||||
|
||||
{#if message.timestamp}
|
||||
<div
|
||||
class="self-center text-xs font-medium first-letter:capitalize ml-0.5 translate-y-[1px] {($settings?.highContrastMode ??
|
||||
false)
|
||||
? 'dark:text-gray-100 text-gray-900'
|
||||
: 'invisible group-hover:visible transition'}"
|
||||
>
|
||||
<Tooltip content={dayjs(message.timestamp * 1000).format('LLLL')}>
|
||||
<!-- $i18n.t('Today at {{LOCALIZED_TIME}}') -->
|
||||
<!-- $i18n.t('Yesterday at {{LOCALIZED_TIME}}') -->
|
||||
<!-- $i18n.t('{{LOCALIZED_DATE}} at {{LOCALIZED_TIME}}') -->
|
||||
|
||||
<span class="line-clamp-1"
|
||||
>{$i18n.t(formatDate(message.timestamp * 1000), {
|
||||
LOCALIZED_TIME: dayjs(message.timestamp * 1000).format('LT'),
|
||||
LOCALIZED_DATE: dayjs(message.timestamp * 1000).format('L')
|
||||
})}</span
|
||||
>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{/if}
|
||||
</Name>
|
||||
</div>
|
||||
{:else if message.timestamp && !subagentResult}
|
||||
<div class="flex justify-end pr-2 text-xs">
|
||||
<div
|
||||
class="text-[0.65rem] font-medium first-letter:capitalize mb-0.5 {($settings?.highContrastMode ??
|
||||
false)
|
||||
? 'dark:text-gray-100 text-gray-900'
|
||||
: 'invisible group-hover:visible transition text-gray-400'}"
|
||||
>
|
||||
<Tooltip content={dayjs(message.timestamp * 1000).format('LLLL')}>
|
||||
<span class="line-clamp-1"
|
||||
>{$i18n.t(formatDate(message.timestamp * 1000), {
|
||||
LOCALIZED_TIME: dayjs(message.timestamp * 1000).format('LT'),
|
||||
LOCALIZED_DATE: dayjs(message.timestamp * 1000).format('L')
|
||||
})}</span
|
||||
>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="chat-{message.role} w-full min-w-full markdown-prose">
|
||||
@@ -412,6 +372,21 @@
|
||||
? 'justify-end'
|
||||
: ''} text-gray-600 dark:text-gray-500"
|
||||
>
|
||||
{#if message.timestamp}
|
||||
<Tooltip
|
||||
className="flex self-center"
|
||||
content={formatMessageTimestampFull(message.timestamp * 1000)}
|
||||
placement="bottom"
|
||||
>
|
||||
<time
|
||||
datetime={new Date(message.timestamp * 1000).toISOString()}
|
||||
class="invisible group-hover:visible mr-1 text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
|
||||
>
|
||||
{formatMessageTimestamp(message.timestamp * 1000)}
|
||||
</time>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
{#if !($settings?.chatBubble ?? true)}
|
||||
{#if siblings.length > 1}
|
||||
<div class="flex self-center" dir="ltr">
|
||||
|
||||
Reference in New Issue
Block a user