mirror of
https://github.com/open-webui/open-webui
synced 2025-03-20 03:58:07 +00:00
refac: tag search
This commit is contained in:
Timothy J. Baek
parent
0b2c7046cd
commit
1db1ef7c26
@ -389,9 +389,22 @@ class ChatTable:
|
||||
Filters chats based on a search query using Python, allowing pagination using skip and limit.
|
||||
"""
|
||||
search_text = search_text.lower().strip()
|
||||
|
||||
if not search_text:
|
||||
return self.get_chat_list_by_user_id(user_id, include_archived, skip, limit)
|
||||
|
||||
search_text_words = search_text.split(" ")
|
||||
|
||||
# search_text might contain 'tag:tag_name' format so we need to extract the tag_name, split the search_text and remove the tags
|
||||
tag_ids = []
|
||||
for word in search_text_words:
|
||||
if word.startswith("tag:"):
|
||||
tag_id = word[4:]
|
||||
tag_ids.append(tag_id)
|
||||
search_text_words.remove(word)
|
||||
|
||||
search_text = " ".join(search_text_words)
|
||||
|
||||
with get_db() as db:
|
||||
query = db.query(Chat).filter(Chat.user_id == user_id)
|
||||
|
||||
@ -420,6 +433,26 @@ class ChatTable:
|
||||
)
|
||||
).params(search_text=search_text)
|
||||
)
|
||||
|
||||
# Check if there are any tags to filter, it should have all the tags
|
||||
if tag_ids:
|
||||
query = query.filter(
|
||||
and_(
|
||||
*[
|
||||
text(
|
||||
f"""
|
||||
EXISTS (
|
||||
SELECT 1
|
||||
FROM json_each(Chat.meta, '$.tags') AS tag
|
||||
WHERE tag.value = :tag_id
|
||||
)
|
||||
"""
|
||||
).params(tag_id=tag_id)
|
||||
for tag_id in tag_ids
|
||||
]
|
||||
)
|
||||
)
|
||||
|
||||
elif dialect_name == "postgresql":
|
||||
# PostgreSQL relies on proper JSON query for search
|
||||
query = query.filter(
|
||||
@ -438,6 +471,25 @@ class ChatTable:
|
||||
)
|
||||
).params(search_text=search_text)
|
||||
)
|
||||
|
||||
# Check if there are any tags to filter, it should have all the tags
|
||||
if tag_ids:
|
||||
query = query.filter(
|
||||
and_(
|
||||
*[
|
||||
text(
|
||||
f"""
|
||||
EXISTS (
|
||||
SELECT 1
|
||||
FROM json_array_elements_text(Chat.meta->'tags') AS tag
|
||||
WHERE tag = :tag_id
|
||||
)
|
||||
"""
|
||||
).params(tag_id=tag_id)
|
||||
for tag_id in tag_ids
|
||||
]
|
||||
)
|
||||
)
|
||||
else:
|
||||
raise NotImplementedError(
|
||||
f"Unsupported dialect: {db.bind.dialect.name}"
|
||||
|
||||
@ -48,6 +48,7 @@
|
||||
import FilesOverlay from '../chat/MessageInput/FilesOverlay.svelte';
|
||||
import AddFilesPlaceholder from '../AddFilesPlaceholder.svelte';
|
||||
import { select } from 'd3-selection';
|
||||
import SearchInput from './Sidebar/SearchInput.svelte';
|
||||
|
||||
const BREAKPOINT = 768;
|
||||
|
||||
@ -93,7 +94,7 @@
|
||||
|
||||
// once the bottom of the list has been reached (no results) there is no need to continue querying
|
||||
allChatsLoaded = newChatList.length === 0;
|
||||
await chats.set([...$chats, ...newChatList]);
|
||||
await chats.set([...($chats ? $chats : []), ...newChatList]);
|
||||
|
||||
chatListLoading = false;
|
||||
};
|
||||
@ -484,35 +485,13 @@
|
||||
<div class="absolute z-40 w-full h-full flex justify-center"></div>
|
||||
{/if}
|
||||
|
||||
<div class="px-2 mt-0.5 mb-2 flex justify-center space-x-2">
|
||||
<div class="flex w-full rounded-xl" id="chat-search">
|
||||
<div class="self-center pl-3 py-2 rounded-l-xl bg-transparent">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="w-4 h-4"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<SearchInput
|
||||
bind:value={search}
|
||||
on:input={searchDebounceHandler}
|
||||
placeholder={$i18n.t('Search')}
|
||||
/>
|
||||
|
||||
<input
|
||||
class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm bg-transparent dark:text-gray-300 outline-none"
|
||||
placeholder={$i18n.t('Search')}
|
||||
bind:value={search}
|
||||
on:input={() => {
|
||||
searchDebounceHandler();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if $tags.length > 0}
|
||||
<!-- {#if $tags.length > 0}
|
||||
<div class="px-3.5 mb-2.5 flex gap-0.5 flex-wrap">
|
||||
<button
|
||||
class="px-2.5 py-[1px] text-xs transition {selectedTagName === null
|
||||
@ -549,7 +528,7 @@
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/if} -->
|
||||
|
||||
{#if !search && $pinnedChats.length > 0}
|
||||
<div class="pl-2 pb-2 flex flex-col space-y-1">
|
||||
|
||||
213
src/lib/components/layout/Sidebar/SearchInput.svelte
Normal file
213
src/lib/components/layout/Sidebar/SearchInput.svelte
Normal file
@ -0,0 +1,213 @@
|
||||
<script lang="ts">
|
||||
import { tags } from '$lib/stores';
|
||||
import { stringify } from 'postcss';
|
||||
import { getContext, createEventDispatcher, onMount, onDestroy, tick } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let placeholder = '';
|
||||
export let value = '';
|
||||
|
||||
let selectedIdx = 0;
|
||||
|
||||
let lastWord = '';
|
||||
$: lastWord = value ? value.split(' ').at(-1) : value;
|
||||
|
||||
let focused = false;
|
||||
let options = [
|
||||
{
|
||||
name: 'tag:',
|
||||
description: $i18n.t('search for tags')
|
||||
}
|
||||
];
|
||||
|
||||
let filteredOptions = options;
|
||||
$: filteredOptions = options.filter((option) => {
|
||||
return option.name.startsWith(lastWord);
|
||||
});
|
||||
|
||||
let filteredTags = [];
|
||||
$: filteredTags = lastWord.startsWith('tag:')
|
||||
? $tags.filter((tag) => {
|
||||
const tagName = lastWord.slice(4);
|
||||
if (tagName) {
|
||||
const tagId = tagName.replace(' ', '_').toLowerCase();
|
||||
|
||||
if (tag.id !== tagId) {
|
||||
return tag.id.startsWith(tagId);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
})
|
||||
: [];
|
||||
|
||||
const documentClickHandler = (e) => {
|
||||
const searchContainer = document.getElementById('search-container');
|
||||
const chatSearch = document.getElementById('chat-search');
|
||||
|
||||
if (!searchContainer.contains(e.target) && !chatSearch.contains(e.target)) {
|
||||
console.log(
|
||||
e.target.id,
|
||||
e.target.id.startsWith('search-tag-') || e.target.id.startsWith('search-option-')
|
||||
);
|
||||
if (e.target.id.startsWith('search-tag-') || e.target.id.startsWith('search-option-')) {
|
||||
return;
|
||||
}
|
||||
focused = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
document.addEventListener('click', documentClickHandler);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
document.removeEventListener('click', documentClickHandler);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="px-2 mt-0.5 mb-2 flex justify-center space-x-2 relative" id="search-container">
|
||||
<div class="flex w-full rounded-xl" id="chat-search">
|
||||
<div class="self-center pl-3 py-2 rounded-l-xl bg-transparent">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="w-4 h-4"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<input
|
||||
id="search-input"
|
||||
class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm bg-transparent dark:text-gray-300 outline-none"
|
||||
placeholder={placeholder ? placeholder : $i18n.t('Search')}
|
||||
bind:value
|
||||
on:input={() => {
|
||||
dispatch('input');
|
||||
}}
|
||||
on:focus={() => {
|
||||
focused = true;
|
||||
}}
|
||||
on:keydown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
if (filteredTags.length > 0) {
|
||||
const tagElement = document.getElementById(`search-tag-${selectedIdx}`);
|
||||
tagElement.click();
|
||||
return;
|
||||
}
|
||||
|
||||
if (filteredOptions.length > 0) {
|
||||
const optionElement = document.getElementById(`search-option-${selectedIdx}`);
|
||||
optionElement.click();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
selectedIdx = Math.max(0, selectedIdx - 1);
|
||||
} else if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
|
||||
if (filteredTags.length > 0) {
|
||||
selectedIdx = Math.min(selectedIdx + 1, filteredTags.length - 1);
|
||||
} else {
|
||||
selectedIdx = Math.min(selectedIdx + 1, filteredOptions.length - 1);
|
||||
}
|
||||
} else {
|
||||
// if the user types something, reset to the top selection.
|
||||
selectedIdx = 0;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if focused && (filteredOptions.length > 0 || filteredTags.length > 0)}
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="absolute top-0 mt-8 left-0 right-1 border dark:border-gray-900 bg-gray-50 dark:bg-gray-950 rounded-lg z-10 shadow-lg"
|
||||
in:fade={{ duration: 50 }}
|
||||
on:mouseenter={() => {
|
||||
selectedIdx = null;
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
selectedIdx = 0;
|
||||
}}
|
||||
>
|
||||
<div class="px-2 py-2 text-xs group">
|
||||
{#if filteredTags.length > 0}
|
||||
<div class="px-1 font-medium dark:text-gray-300 text-gray-700 mb-1">Tags</div>
|
||||
|
||||
<div class="">
|
||||
{#each filteredTags as tag, tagIdx}
|
||||
<button
|
||||
class=" px-1.5 py-0.5 flex gap-1 hover:bg-gray-100 dark:hover:bg-gray-900 w-full rounded {selectedIdx ===
|
||||
tagIdx
|
||||
? 'bg-gray-100 dark:bg-gray-900'
|
||||
: ''}"
|
||||
id="search-tag-{tagIdx}"
|
||||
on:click={async () => {
|
||||
const words = value.split(' ');
|
||||
|
||||
words.pop();
|
||||
words.push(`tag:${tag.id} `);
|
||||
|
||||
value = words.join(' ');
|
||||
|
||||
dispatch('input');
|
||||
}}
|
||||
>
|
||||
<div class="dark:text-gray-300 text-gray-700 font-medium">{tag.name}</div>
|
||||
|
||||
<div class=" text-gray-500 line-clamp-1">
|
||||
{tag.id}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if filteredOptions.length > 0}
|
||||
<div class="px-1 font-medium dark:text-gray-300 text-gray-700 mb-1">Search options</div>
|
||||
|
||||
<div class="">
|
||||
{#each filteredOptions as option, optionIdx}
|
||||
<button
|
||||
class=" px-1.5 py-0.5 flex gap-1 hover:bg-gray-100 dark:hover:bg-gray-900 w-full rounded {selectedIdx ===
|
||||
optionIdx
|
||||
? 'bg-gray-100 dark:bg-gray-900'
|
||||
: ''}"
|
||||
id="search-option-{optionIdx}"
|
||||
on:click={async () => {
|
||||
const words = value.split(' ');
|
||||
|
||||
words.pop();
|
||||
words.push('tag:');
|
||||
|
||||
value = words.join(' ');
|
||||
|
||||
dispatch('input');
|
||||
}}
|
||||
>
|
||||
<div class="dark:text-gray-300 text-gray-700 font-medium">{option.name}</div>
|
||||
|
||||
<div class=" text-gray-500 line-clamp-1">
|
||||
{option.description}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user