-
Notifications
You must be signed in to change notification settings - Fork 63
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: added search, favorites, and overhauled sidebars (#42)
* feat: added search, favorites, and overhauled sidebars * fix: correct header on settings
- Loading branch information
Showing
28 changed files
with
528 additions
and
240 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
components/app-messages-sidebar/favorite-conversations.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <script lang="ts" setup> | ||
| const { conversationList } = useConversations() | ||
| const { filterConversationsBySearchTerm } = useSearch() | ||
| const conversationsSortedByUpdatedAt = computed(() => { | ||
| if (conversationList.value === null) { | ||
| return null | ||
| } | ||
| return filterConversationsBySearchTerm(conversationList.value) | ||
| .filter(conversation => conversation.metadata?.favorite) | ||
| .sort((a, b) => { | ||
| if (a.updatedAt === null) { | ||
| return 1 | ||
| } | ||
| if (b.updatedAt === null) { | ||
| return -1 | ||
| } | ||
| // Compare dates | ||
| return b.updatedAt.getTime() - a.updatedAt.getTime() | ||
| }) | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <div v-if="conversationsSortedByUpdatedAt?.length" uppercase font-bold font-text text-13px text-color-lighter my-2 flex items-center px-3> | ||
| Favorites | ||
| </div> | ||
| <div | ||
| max-h-100 overflow-y-auto overflow-x-hidden w-full pb-2 | ||
| > | ||
| <ConversationTab | ||
| v-for="conversation in conversationsSortedByUpdatedAt" | ||
| :key="conversation.id" | ||
| :conversation="conversation" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| <script lang="ts" setup> | ||
| const { | ||
| createConversation, | ||
| switchConversation, | ||
| clearConversations, | ||
| } = useConversations() | ||
| const { apiKey } = useSettings() | ||
| const { isSidebarCompact } = useUI() | ||
| const colorMode = useColorMode() | ||
| const onCreateConversation = async () => { | ||
| const newConversation = await createConversation('Untitled Conversation') | ||
| await switchConversation(newConversation.id) | ||
| } | ||
| const isSearchBarVisible = ref(false) | ||
| function onToggleSearchBar() { | ||
| isSearchBarVisible.value = !isSearchBarVisible.value | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div | ||
| h-full flex-col flex | ||
| b-0 b-r-1 b-solid b="dark:white/15 dark-1/10" | ||
| > | ||
| <div text-color font-bold font-title text-5 px-3 my-4 flex items-center> | ||
| <div> | ||
| Messages | ||
| </div> | ||
|
|
||
| <UButton | ||
| secondary | ||
| :icon="`${isSearchBarVisible ? 'i-tabler-search-off' : 'i-tabler-message-search'} text-18px`" | ||
| ml-auto @click="onToggleSearchBar" | ||
| /> | ||
| </div> | ||
|
|
||
| <Transition name="fade"> | ||
| <div | ||
| v-if="isSearchBarVisible" | ||
| px-3 mb-4 | ||
| > | ||
| <SearchBar w-full text-16px font-text /> | ||
| </div> | ||
| </Transition> | ||
|
|
||
| <AppMessagesSidebarFavoriteConversations /> | ||
| <AppMessagesSidebarRecentConversations /> | ||
| <div mt-auto> | ||
| <div flex="~ col" children:grow gap-3 mt-2 px-3> | ||
| <UButton | ||
| secondary icon="i-tabler-plus" | ||
| @click="onCreateConversation" | ||
| > | ||
| New chat | ||
| </UButton> | ||
| <GpLongPressButton | ||
| :duration="1500" | ||
| icon="i-tabler-arrow-bar-to-up" | ||
| progress-bar-style="bg-red/50" | ||
| success-style="!ring-red" | ||
| @success="clearConversations" | ||
| > | ||
| Clear all | ||
| </GpLongPressButton> | ||
| </div> | ||
| <SidebarApiKeyAlert | ||
| v-if="!apiKey" | ||
| mt-3 mx-2 | ||
| @click="navigateTo('/settings/api-key')" | ||
| /> | ||
| <div | ||
| text-color-lighter my-6 text-5 tracking--1px w-full | ||
| flex justify-center items-center | ||
| > | ||
| <img | ||
| :src=" | ||
| isSidebarCompact | ||
| ? `/image/logo-${colorMode.value}-square-transparent.svg` | ||
| : `/image/logo-${colorMode.value}-lettered.svg` | ||
| " | ||
| :class="[isSidebarCompact ? 'w-12' : 'w-24']" op-60 | ||
| > | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <script lang="ts" setup> | ||
| const { conversationList } = useConversations() | ||
| const { filterConversationsBySearchTerm } = useSearch() | ||
| const conversationsSortedByUpdatedAt = computed(() => { | ||
| if (conversationList.value === null) { | ||
| return null | ||
| } | ||
| return filterConversationsBySearchTerm(conversationList.value) | ||
| .filter(conversation => !conversation.metadata?.favorite) | ||
| .sort((a, b) => { | ||
| if (a.updatedAt === null) { | ||
| return 1 | ||
| } | ||
| if (b.updatedAt === null) { | ||
| return -1 | ||
| } | ||
| // Compare dates | ||
| return b.updatedAt.getTime() - a.updatedAt.getTime() | ||
| }) | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <div uppercase font-bold font-text text-13px text-color-lighter my-2 flex items-center px-3> | ||
| Recent | ||
| </div> | ||
| <div | ||
| v-if="conversationsSortedByUpdatedAt?.length" max-h-100 overflow-y-auto overflow-x-hidden w-full | ||
| pb-2 | ||
| > | ||
| <ConversationTab | ||
| v-for="conversation in conversationsSortedByUpdatedAt" | ||
| :key="conversation.id" | ||
| :conversation="conversation" | ||
| w-full | ||
| /> | ||
| </div> | ||
| <div v-else> | ||
| <div text-color flex="~ col" items-center justify-center gap-1 op-40> | ||
| <div i-tabler-file-off text-7 /> | ||
| <div font-bold font-title> | ||
| No results | ||
| </div> | ||
| <div text-3> | ||
| Try a different search term | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> |
Oops, something went wrong.