mirror of
https://github.com/open-webui/open-webui
synced 2025-01-18 08:40:58 +00:00
refac: styling
This commit is contained in:
Timothy J. Baek
parent
74a8deb19f
commit
4d64893661
@ -403,18 +403,12 @@ export const generateSearchQuery = async (
|
||||
let error = null;
|
||||
|
||||
// TODO: Allow users to specify the prompt
|
||||
|
||||
// Get the current date in the format "January 20, 2024"
|
||||
const currentDate = new Intl.DateTimeFormat('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: '2-digit'
|
||||
}).format(new Date());
|
||||
const yesterdayDate = new Intl.DateTimeFormat('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: '2-digit'
|
||||
}).format(new Date());
|
||||
|
||||
const res = await fetch(`${url}/chat/completions`, {
|
||||
method: 'POST',
|
||||
@ -431,14 +425,6 @@ export const generateSearchQuery = async (
|
||||
role: 'assistant',
|
||||
content: `You are tasked with generating web search queries. Give me an appropriate query to answer my question for google search. Answer with only the query. Today is ${currentDate}.`
|
||||
},
|
||||
{
|
||||
role: 'user',
|
||||
content: 'What is the current weather in Paris?'
|
||||
},
|
||||
{
|
||||
role: 'assistant',
|
||||
content: `Weather in Paris ${currentDate}`
|
||||
},
|
||||
{
|
||||
role: 'user',
|
||||
content: prompt
|
||||
|
||||
@ -434,17 +434,21 @@
|
||||
};
|
||||
messages = messages;
|
||||
|
||||
const searchQuery = await generateChatSearchQuery(model, parentId);
|
||||
if (!searchQuery) {
|
||||
toast.warning($i18n.t('No search query generated'));
|
||||
responseMessage.status = {
|
||||
...responseMessage.status,
|
||||
done: true,
|
||||
error: true,
|
||||
description: 'No search query generated'
|
||||
};
|
||||
messages = messages;
|
||||
return;
|
||||
const prompt = history.messages[parentId].content;
|
||||
let searchQuery = prompt;
|
||||
if (prompt.length > 100) {
|
||||
searchQuery = await generateChatSearchQuery(model, prompt);
|
||||
if (!searchQuery) {
|
||||
toast.warning($i18n.t('No search query generated'));
|
||||
responseMessage.status = {
|
||||
...responseMessage.status,
|
||||
done: true,
|
||||
error: true,
|
||||
description: 'No search query generated'
|
||||
};
|
||||
messages = messages;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
responseMessage.status = {
|
||||
@ -469,7 +473,8 @@
|
||||
responseMessage.status = {
|
||||
...responseMessage.status,
|
||||
done: true,
|
||||
description: $i18n.t('Searched {{count}} sites', { count: results.filenames.length })
|
||||
description: $i18n.t('Searched {{count}} sites', { count: results.filenames.length }),
|
||||
urls: results.filenames
|
||||
};
|
||||
|
||||
if (responseMessage?.files ?? undefined === undefined) {
|
||||
@ -1034,15 +1039,14 @@
|
||||
}
|
||||
};
|
||||
|
||||
const generateChatSearchQuery = async (modelId: string, messageId: string) => {
|
||||
const generateChatSearchQuery = async (modelId: string, prompt: string) => {
|
||||
const model = $models.find((model) => model.id === modelId);
|
||||
const taskModelId =
|
||||
model?.owned_by === 'openai' ?? false
|
||||
? $settings?.title?.modelExternal ?? modelId
|
||||
: $settings?.title?.model ?? modelId;
|
||||
const taskModel = $models.find((model) => model.id === taskModelId);
|
||||
const userMessage = history.messages[messageId];
|
||||
const userPrompt = userMessage.content;
|
||||
|
||||
const previousMessages = messages
|
||||
.filter((message) => message.role === 'user')
|
||||
.map((message) => message.content);
|
||||
@ -1051,7 +1055,7 @@
|
||||
localStorage.token,
|
||||
taskModelId,
|
||||
previousMessages,
|
||||
userPrompt,
|
||||
prompt,
|
||||
taskModel?.owned_by === 'openai' ?? false
|
||||
? `${OPENAI_API_BASE_URL}`
|
||||
: `${OLLAMA_API_BASE_URL}/v1`
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
import RateComment from './RateComment.svelte';
|
||||
import CitationsModal from '$lib/components/chat/Messages/CitationsModal.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import WebSearchResults from './ResponseMessage/WebSearchResults.svelte';
|
||||
|
||||
export let message;
|
||||
export let siblings;
|
||||
@ -389,11 +390,21 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col justify-center -space-y-0.5">
|
||||
<div class=" text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap">
|
||||
{message.status.description}
|
||||
{#if message?.status?.action === 'web_search' && message?.status?.urls}
|
||||
<WebSearchResults urls={message?.status?.urls}>
|
||||
<div class="flex flex-col justify-center -space-y-0.5">
|
||||
<div class="text-base line-clamp-1 text-wrap">
|
||||
{message.status.description}
|
||||
</div>
|
||||
</div>
|
||||
</WebSearchResults>
|
||||
{:else}
|
||||
<div class="flex flex-col justify-center -space-y-0.5">
|
||||
<div class=" text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap">
|
||||
{message.status.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
@ -0,0 +1,60 @@
|
||||
<script lang="ts">
|
||||
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
|
||||
import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
|
||||
import { Collapsible } from 'bits-ui';
|
||||
import { slide } from 'svelte/transition';
|
||||
|
||||
export let urls = [];
|
||||
let state = false;
|
||||
</script>
|
||||
|
||||
<Collapsible.Root class="w-full space-y-1" bind:open={state}>
|
||||
<Collapsible.Trigger>
|
||||
<div
|
||||
class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
|
||||
>
|
||||
<slot />
|
||||
|
||||
{#if state}
|
||||
<ChevronUp strokeWidth="3.5" className="size-3.5 " />
|
||||
{:else}
|
||||
<ChevronDown strokeWidth="3.5" className="size-3.5 " />
|
||||
{/if}
|
||||
</div>
|
||||
</Collapsible.Trigger>
|
||||
|
||||
<Collapsible.Content
|
||||
class=" text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl"
|
||||
transition={slide}
|
||||
>
|
||||
{#each urls as url, urlIdx}
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
class="flex w-full items-center p-3 px-4 {urlIdx === urls.length - 1
|
||||
? ''
|
||||
: 'border-b border-gray-300/30 dark:border-gray-700/50'} group/item justify-between font-normal text-gray-800 dark:text-gray-300"
|
||||
>
|
||||
{url}
|
||||
|
||||
<div
|
||||
class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
|
||||
>
|
||||
<!-- -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="size-4"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
15
src/lib/components/icons/ChevronUp.svelte
Normal file
15
src/lib/components/icons/ChevronUp.svelte
Normal file
@ -0,0 +1,15 @@
|
||||
<script lang="ts">
|
||||
export let className = 'w-4 h-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
|
||||
</svg>
|
||||
Loading…
Reference in New Issue
Block a user