Add chat sorting

src/app.scss

@@ -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;
 }
 

src/lib/Chat.svelte

@@ -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()

src/lib/Home.svelte

@@ -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

src/lib/Settings.svelte

@@ -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 = [
+export const chatSortOptions = {
-  { value: 'name', text: 'Name' },
+  name: { text: 'Name', icon: faArrowDownAZ, value: '', sortFn: (a, b) => { return a.name < b.name ? -1 : a.name > b.name ? 1 : 0 } },
-  { value: 'created', text: 'Created' },
+  created: { text: 'Created', icon: faArrowDown91, value: '', sortFn: (a, b) => { return ((b.created || 0) - (a.created || 0)) || (b.id - a.id) } },
-  { value: 'updated', text: 'Last Use' },
+  lastUse: { text: 'Last Use', icon: faArrowDown91, value: '', sortFn: (a, b) => { return ((b.lastUse || 0) - (a.lastUse || 0)) || (b.id - a.id) } },
-  { value: 'lastAccess', text: 'Last View' }
+  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',

src/lib/Sidebar.svelte

@@ -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">
+    <div class="level is-mobile bottom-buttons p-1">
-      <li>
+      <div class="level-left">
-        <div class="level-right side-actions">
+        <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>
+    </div>
-    </ul>
   </div>
 </aside>

src/lib/Storage.svelte

@@ -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 type { Chat, ChatSettings, GlobalSettings, Message, ChatSetting, GlobalSetting, Usage, Model, ChatSortOption } from './Types.svelte'
-  import { getChatSettingObjectByKey, getGlobalSettingObjectByKey, getChatDefaults, getExcludeFromProfile } from './Settings.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

src/lib/Types.svelte

@@ -1,32 +1,31 @@
 <script context="module" lang="ts">
-  import { supportedModelKeys } from './Models.svelte'
+    import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'
-  import { chatSortOptionsKeys, imageGenerationSizeTypes } from './Settings.svelte'
+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;
+    lastProfile: string|null;
-    defaultProfile?: string;
+    defaultProfile: string;
-    hideSummarized?: boolean;
+    hideSummarized: boolean;
-    chatSort: keyof ChatSortTypes;
+    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;