morgan
/
chatgpt-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add chat sorting

This commit is contained in:
Webifi 2023-06-24 15:51:06 -05:00
parent 8835ee1d6e
commit 52affeb83f
7 changed files with 134 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app.scss
View File

@ -363,7 +363,8 @@ aside.menu.main-menu .menu-expanse {
.menu-expanse
.menu-label, .menu-expanse
.menu-list {
.menu-list,
.menu-expanse .bottom-buttons {
flex: 0 1 auto;
}

2
src/lib/Chat.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts">
// This beast needs to be broken down into multiple components before it gets any worse.
import {
saveChatStore,
chatsStorage,
@ -118,6 +117,7 @@
chat.lastAccess = Date.now()
saveChatStore()
$checkStateChange++
// Focus the input on mount
focusInput()

2
src/lib/Home.svelte
View File

@ -9,7 +9,7 @@ $: apiKey = $apiKeyStorage
onMount(() => {
if (!$started) {
$started = true
console.log('started', apiKey, $lastChatId, getChat($lastChatId))
// console.log('started', apiKey, $lastChatId, getChat($lastChatId))
if (apiKey && getChat($lastChatId)) {
// const chatId = $lastChatId
$lastChatId = 0

29
src/lib/Settings.svelte
View File

@ -2,7 +2,7 @@
import { applyProfile } from './Profiles.svelte'
import { getChatSettings, getGlobalSettings, setGlobalSettingValueByKey } from './Storage.svelte'
import { encode } from 'gpt-tokenizer'
import { faCheck, faThumbTack } from '@fortawesome/free-solid-svg-icons/index'
import { faArrowDown91, faArrowDownAZ, faCheck, faThumbTack } from '@fortawesome/free-solid-svg-icons/index'
// Setting definitions
import {
@ -13,7 +13,10 @@ import {
type GlobalSettings,
type Request,
type Model,
type ControlAction
type ControlAction,
type ChatSortOption
} from './Types.svelte'
export const defaultModel:Model = 'gpt-3.5-turbo'
@ -93,6 +96,14 @@ const defaults:ChatSettings = {
isDirty: false
}
export const globalDefaults: GlobalSettings = {
profiles: {} as Record<string, ChatSettings>,
lastProfile: 'default',
defaultProfile: 'default',
hideSummarized: false,
chatSort: 'created'
}
const excludeFromProfile = {
messages: true,
user: true,
@ -105,14 +116,14 @@ export const imageGenerationSizes = [
export const imageGenerationSizeTypes = ['', ...imageGenerationSizes]
export const chatSortOptions = [
{ value: 'name', text: 'Name' },
{ value: 'created', text: 'Created' },
{ value: 'updated', text: 'Last Use' },
{ value: 'lastAccess', text: 'Last View' }
]
export const chatSortOptions = {
name: { text: 'Name', icon: faArrowDownAZ, value: '', sortFn: (a, b) => { return a.name < b.name ? -1 : a.name > b.name ? 1 : 0 } },
created: { text: 'Created', icon: faArrowDown91, value: '', sortFn: (a, b) => { return ((b.created || 0) - (a.created || 0)) || (b.id - a.id) } },
lastUse: { text: 'Last Use', icon: faArrowDown91, value: '', sortFn: (a, b) => { return ((b.lastUse || 0) - (a.lastUse || 0)) || (b.id - a.id) } },
lastAccess: { text: 'Last View', icon: faArrowDown91, value: '', sortFn: (a, b) => { return ((b.lastAccess || 0) - (a.lastAccess || 0)) || (b.id - a.id) } }
} as Record<string, ChatSortOption>
export const chatSortOptionsKeys = chatSortOptions.map(o => o.value, [] as string[])
Object.entries(chatSortOptions).forEach(([k, o]) => { o.value = k })
const profileSetting: ChatSetting & SettingSelect = {
key: 'profile',

48
src/lib/Sidebar.svelte
View File

@ -1,17 +1,30 @@
<script lang="ts">
import { params } from 'svelte-spa-router'
import ChatMenuItem from './ChatMenuItem.svelte'
import { apiKeyStorage, chatsStorage, pinMainMenu, checkStateChange } from './Storage.svelte'
import { apiKeyStorage, chatsStorage, pinMainMenu, checkStateChange, getChatSortOption, setChatSortOption } from './Storage.svelte'
import Fa from 'svelte-fa/src/fa.svelte'
import { faSquarePlus, faKey } from '@fortawesome/free-solid-svg-icons/index'
import ChatOptionMenu from './ChatOptionMenu.svelte'
import logo from '../assets/logo.svg'
import { clickOutside } from 'svelte-use-click-outside'
import { startNewChatWithWarning } from './Util.svelte'
import { chatSortOptions } from './Settings.svelte'
$: sortedChats = $chatsStorage.sort((a, b) => ((b.created || 0) - (a.created || 0)) || (b.id - a.id))
$: sortedChats = $chatsStorage.sort(getChatSortOption().sortFn)
$: activeChatId = $params && $params.chatId ? parseInt($params.chatId) : undefined
let sortOption = getChatSortOption()
const onStateChange = (...args:any) => {
sortOption = getChatSortOption()
sortedChats = $chatsStorage.sort(sortOption.sortFn)
// console.log('Sorting', sortOption, sortedChats)
}
$: onStateChange($checkStateChange)
let showSortMenu = false
</script>
<aside class="menu main-menu" class:pinned={$pinMainMenu} use:clickOutside={() => { $pinMainMenu = false }}>
@ -37,22 +50,39 @@
{/if}
</ul>
<!-- <p class="menu-label">Actions</p> -->
<ul class="menu-list">
<li>
<div class="level-right side-actions">
<div class="level is-mobile bottom-buttons p-1">
<div class="level-left">
<div class="dropdown is-left is-up" class:is-active={showSortMenu}>
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu3" on:click|preventDefault|stopPropagation={() => { showSortMenu = !showSortMenu }}>
<span class="icon"><Fa icon={sortOption.icon}/></span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
<div class="dropdown-content">
{#each Object.values(chatSortOptions) as opt}
<a href={'#'} class="dropdown-item" class:is-active={sortOption === opt} on:click|preventDefault={() => { showSortMenu = false; setChatSortOption(opt.value) }}>
<span class="menu-icon"><Fa icon={opt.icon}/></span>
{opt.text}
</a>
{/each}
</div>
</div>
</div>
</div>
<div class="level-right">
{#if !$apiKeyStorage}
<div class="level-item">
<a href={'#/'} class="panel-block" class:is-disabled={!$apiKeyStorage}
><span class="greyscale mr-2"><Fa icon={faKey} /></span> API key</a
><span class="greyscale mr-1"><Fa icon={faKey} /></span> API key</a
></div>
{:else}
<div class="level-item">
<button on:click={() => { $pinMainMenu = false; startNewChatWithWarning(activeChatId) }} class="panel-block button" title="Start new chat with default profile" class:is-disabled={!$apiKeyStorage}
><span class="greyscale mr-2"><Fa icon={faSquarePlus} /></span> New chat</button>
><span class="greyscale mr-1"><Fa icon={faSquarePlus} /></span> New chat</button>
</div>
{/if}
</div>
</li>
</ul>
</div>
</div>
</aside>

21
src/lib/Storage.svelte
View File

@ -1,8 +1,8 @@
<script context="module" lang="ts">
import { persisted } from 'svelte-local-storage-store'
import { get, writable } from 'svelte/store'
import type { Chat, ChatSettings, GlobalSettings, Message, ChatSetting, GlobalSetting, Usage, Model } from './Types.svelte'
import { getChatSettingObjectByKey, getGlobalSettingObjectByKey, getChatDefaults, getExcludeFromProfile } from './Settings.svelte'
import type { Chat, ChatSettings, GlobalSettings, Message, ChatSetting, GlobalSetting, Usage, Model, ChatSortOption } from './Types.svelte'
import { getChatSettingObjectByKey, getGlobalSettingObjectByKey, getChatDefaults, getExcludeFromProfile, chatSortOptions, globalDefaults } from './Settings.svelte'
import { v4 as uuidv4 } from 'uuid'
import { getProfile, getProfiles, isStaticProfile, newNameForProfile, restartProfile } from './Profiles.svelte'
import { errorNotice } from './Util.svelte'
@ -54,7 +54,7 @@
startSession: false,
sessionStarted: false,
created: Date.now(),
updated: Date.now(),
lastUse: Date.now(),
lastAccess: Date.now()
})
chatsStorage.set(chats)
@ -257,7 +257,7 @@
} else {
clearTimeout(setMessagesTimers[chatId])
const chat = getChat(chatId)
chat.updated = Date.now()
chat.lastUse = Date.now()
chat.messages = messages
saveChatStore()
}
@ -387,6 +387,7 @@
// Set the ID
chatCopy.id = newChatID()
chatCopy.created = Date.now()
// Set new name
chatCopy.name = cname
@ -532,6 +533,18 @@
getProfiles(true) // force update profile cache
}
export const getChatSortOption = (): ChatSortOption => {
const store = get(globalStorage)
return (chatSortOptions[store.chatSort] || chatSortOptions[globalDefaults.chatSort])
}
export const setChatSortOption = (sortName: any) => {
const store = get(globalStorage)
store.chatSort = chatSortOptions[sortName] ? sortName : globalDefaults.chatSort
globalStorage.set(store)
checkStateChange.set(get(checkStateChange) + 1)
}
export const newName = (name:string, nameMap:Record<string, any>):string => {
if (!nameMap[name]) return name
let i:number = 1

22
src/lib/Types.svelte
View File

@ -1,13 +1,12 @@
<script context="module" lang="ts">
import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'
import { supportedModelKeys } from './Models.svelte'
import { chatSortOptionsKeys, imageGenerationSizeTypes } from './Settings.svelte'
import { imageGenerationSizeTypes } from './Settings.svelte'
export type Model = typeof supportedModelKeys[number];
export type ImageGenerationSizes = typeof imageGenerationSizeTypes[number];
export type ChatSortTypes = typeof chatSortOptionsKeys[number];
export type ModelDetail = {
prompt: number;
completion: number;
@ -113,7 +112,7 @@
startSession: boolean;
sessionStarted: boolean;
created: number;
updated: number;
lastUse: number;
lastAccess: number;
};
@ -160,12 +159,14 @@
fillMessage?:Message,
};
export type ChatSortOptions = 'name'|'created'|'lastUse'|'lastAccess';
export type GlobalSettings = {
profiles: Record<string, ChatSettings>;
lastProfile?: string;
defaultProfile?: string;
hideSummarized?: boolean;
chatSort: keyof ChatSortTypes;
lastProfile: string|null;
defaultProfile: string;
hideSummarized: boolean;
chatSort: ChatSortOptions;
};
type SettingNumber = {
@ -180,6 +181,11 @@
text: string;
};
export type ChatSortOption = SelectOption & {
sortFn: (a: Chat, b: Chat) => number;
icon: IconDefinition;
};
type SettingBoolean = {
type: 'boolean';
};