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',

64
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">
{#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
></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>
<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>
{/if}
</div>
</div>
</li>
</ul>
</div>
<div class="level-right">
{#if !$apiKeyStorage}
<div class="level-item">
<a href={'#/'} class="panel-block" class:is-disabled={!$apiKeyStorage}
><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-1"><Fa icon={faSquarePlus} /></span> New chat</button>
</div>
{/if}
</div>
</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

82
src/lib/Types.svelte
View File

@ -1,32 +1,31 @@
<script context="module" lang="ts">
import { supportedModelKeys } from './Models.svelte'
import { chatSortOptionsKeys, imageGenerationSizeTypes } from './Settings.svelte'
import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'
import { supportedModelKeys } from './Models.svelte'
import { imageGenerationSizeTypes } from './Settings.svelte'
export type Model = typeof supportedModelKeys[number];
export type Model = typeof supportedModelKeys[number];
export type ImageGenerationSizes = typeof imageGenerationSizeTypes[number];
export type ImageGenerationSizes = typeof imageGenerationSizeTypes[number];
export type ChatSortTypes = typeof chatSortOptionsKeys[number];
export type ModelDetail = {
export type ModelDetail = {
prompt: number;
completion: number;
max: number;
};
export type Usage = {
export type Usage = {
completion_tokens: number;
prompt_tokens: number;
total_tokens: number;
};
export interface ChatImage {
export interface ChatImage {
id: string;
b64image: string;
chats: number[];
}
export type Message = {
export type Message = {
role: 'user' | 'assistant' | 'system' | 'error' | 'image';
content: string;
uuid: string;
@ -42,30 +41,30 @@
created?: number;
};
export type ResponseAlteration = {
export type ResponseAlteration = {
type: 'prompt' | 'replace';
match: string;
replace: string;
}
export type ResponseImageDetail = {
export type ResponseImageDetail = {
url: string;
b64_json: string;
}
export type ResponseImage = {
export type ResponseImage = {
created: number;
data: ResponseImageDetail[];
}
export type RequestImageGeneration = {
export type RequestImageGeneration = {
prompt: string;
n?: number;
size?: ImageGenerationSizes;
response_format?: keyof ResponseImageDetail;
}
export type Request = {
export type Request = {
model: Model;
messages?: Message[];
temperature?: number;
@ -80,7 +79,7 @@
user?: string;
};
export type ChatSettings = {
export type ChatSettings = {
profile: string,
characterName: string,
profileName: string,
@ -104,7 +103,7 @@
isDirty?: boolean;
} & Request;
export type Chat = {
export type Chat = {
id: number;
name: string;
messages: Message[];
@ -113,7 +112,7 @@
startSession: boolean;
sessionStarted: boolean;
created: number;
updated: number;
lastUse: number;
lastAccess: number;
};
@ -140,16 +139,16 @@
};
};
export type Response = ResponseOK & ResponseError;
export type Response = ResponseOK & ResponseError;
export type ResponseModels = {
export type ResponseModels = {
object: 'list';
data: {
id: string;
}[];
};
export type ChatCompletionOpts = {
export type ChatCompletionOpts = {
chat: Chat;
autoAddMessages: boolean;
maxTokens?:number;
@ -160,12 +159,14 @@
fillMessage?:Message,
};
export type GlobalSettings = {
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 = {
@ -175,39 +176,44 @@
step: number;
};
export type SelectOption = {
export type SelectOption = {
value: string|number;
text: string;
};
export type ChatSortOption = SelectOption & {
sortFn: (a: Chat, b: Chat) => number;
icon: IconDefinition;
};
type SettingBoolean = {
type: 'boolean';
};
export type SettingSelect = {
export type SettingSelect = {
type: 'select';
options: SelectOption[];
};
export type SettingSelectNumber = {
export type SettingSelectNumber = {
type: 'select-number';
options: SelectOption[];
};
export type SettingText = {
export type SettingText = {
type: 'text';
};
export type SettingTextArea = {
export type SettingTextArea = {
type: 'textarea';
lines?: number;
};
export type SettingOther = {
export type SettingOther = {
type: 'other';
};
export type ControlAction = {
export type ControlAction = {
title:string;
icon?:any,
text?:string;
@ -216,16 +222,16 @@
action?: (chatId:number, setting:any, value:any) => any;
};
export type FieldControl = {
export type FieldControl = {
getAction: (chatId:number, setting:any, value:any) => ControlAction;
};
export type SubSetting = {
export type SubSetting = {
type: 'subset';
settings: any[];
};
export type ChatSetting = {
export type ChatSetting = {
key: keyof ChatSettings;
name: string;
title: string;
@ -242,7 +248,7 @@
} & (SettingNumber | SettingSelect | SettingSelectNumber | SettingBoolean | SettingText | SettingTextArea | SettingOther | SubSetting);
export type GlobalSetting = {
export type GlobalSetting = {
key: keyof GlobalSettings;
name?: string;
title?: string;
@ -252,7 +258,7 @@
headerClass?: string;
} & (SettingNumber | SettingSelect | SettingBoolean | SettingText | SettingOther);
export type SettingPrompt = {
export type SettingPrompt = {
title: string;
message: string;
class?: string;