feat: modern UI (#34)

astro.config.mjs

@@ -40,7 +40,7 @@ export default defineConfig({
           name: 'Anse',
           short_name: 'Anse',
           description: 'Anse is a fully optimized UI for AI Chats.',
-          theme_color: '#212129',
+          theme_color: '#101010',
           background_color: '#ffffff',
           icons: [
             {
@@ -54,7 +54,7 @@ export default defineConfig({
               type: 'image/png',
             },
             {
-              src: 'icon.svg',
+              src: 'logo.svg',
               sizes: '32x32',
               type: 'image/svg',
               purpose: 'any maskable',

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

src/assets/zag-components.css

@@ -83,10 +83,10 @@
 * -----------------------------------------------------------------------------*/
 
 [data-scope='select'][data-part='content'] {
-  @apply border border-darker
+  @apply border border-base-100
 }
 [data-scope='select'][data-part='trigger'][data-expanded] {
-  @apply border border-darker
+  @apply border border-base-100
 }
 
 /* -----------------------------------------------------------------------------

src/components/Main.astro

@@ -10,7 +10,6 @@ import Conversation from './main/Conversation'
 <main class="relative h-full flex-1 flex flex-col overflow-hidden bg-base">
   <Header client:load />
   <main class="flex-1 mt-14 flex flex-col overflow-hidden">
-    <!-- <ConversationConfiguration /> -->
     <div class="flex-1 relative overflow-hidden">
       <Conversation client:only />
     </div>

src/components/ModalsLayer.tsx

@@ -13,7 +13,7 @@ import Modal from './ui/Modal'
 export default () => {
   return (
     <>
-      <Modal bindValue={showConversationSidebar} direction="left">
+      <Modal bindValue={showConversationSidebar} direction="left" closeBtnClass="hidden">
         <div class="w-[70vw] max-w-[300px] h-full">
           <ConversationSidebar />
         </div>

src/components/Send.tsx

@@ -6,9 +6,10 @@ import { addConversation, conversationMap, currentConversationId } from '@/store
 import { loadingStateMap, streamsMap } from '@/stores/streams'
 import { handlePrompt } from '@/logics/conversation'
 import { globalAbortController } from '@/stores/settings'
-import { useMobileScreen } from '@/hooks'
+import { useI18n, useMobileScreen } from '@/hooks'
 
 export default () => {
+  const { t } = useI18n()
   let inputRef: HTMLTextAreaElement
   const $conversationMap = useStore(conversationMap)
   const $currentConversationId = useStore(currentConversationId)
@@ -56,7 +57,7 @@ export default () => {
         inputRef.focus()
       }}
     >
-      <div class="flex-1 op-30">Enter Something...</div>
+      <div class="flex-1 op-30 text-sm">{t('send.placeholder')}</div>
       <div class="i-carbon-send op-50 text-xl" />
     </div>
   )
@@ -65,7 +66,7 @@ export default () => {
     <div class="h-full relative">
       <textarea
         ref={inputRef!}
-        placeholder="Enter something..."
+        placeholder={t('send.placeholder')}
         autocomplete="off"
         onBlur={() => { isSendBoxFocus.set(false) }}
         onInput={() => { setInputPrompt(inputRef.value) }}
@@ -115,7 +116,7 @@ export default () => {
     <div class="max-w-base h-full fi flex-row gap-2">
       <div class="flex-1 op-50">Thinking...</div>
       <div
-        class="border border-darker px-2 py-1 rounded-md text-sm op-40 hv-base hover:bg-white"
+        class="border border-base-100 px-2 py-1 rounded-md text-sm op-40 hv-base hover:bg-white"
         onClick={() => { handleAbortFetch() }}
       >
         Abort
@@ -138,7 +139,7 @@ export default () => {
 
   const stateRootClass = () => {
     if (stateType() === 'normal')
-      return 'bg-base-100 hv-base'
+      return 'hv-base'
     else if (stateType() === 'error')
       return 'bg-red/8'
     else if (stateType() === 'loading')
@@ -156,7 +157,7 @@ export default () => {
     else if (stateType() === 'loading')
       return 'px-6 h-14'
     else if (stateType() === 'editing')
-      return 'h-40'
+      return 'h-50'
     return ''
   }
 

src/components/conversations/ConversationEdit.tsx

@@ -3,6 +3,7 @@ import { useStore } from '@nanostores/solid'
 import BotSelect from '@/components/ui/BotSelect'
 import { getBotMetaById } from '@/stores/provider'
 import { emojiPickerCurrentPick, showEmojiPickerModal } from '@/stores/ui'
+import { useI18n } from '@/hooks'
 import type { Conversation } from '@/types/conversation'
 
 interface Props {
@@ -11,6 +12,7 @@ interface Props {
 }
 
 export default (props: Props) => {
+  const { t } = useI18n()
   const [providerBot, setProviderBot] = createSignal(props.conversation.bot || '')
   const $emojiPickerCurrentPick = useStore(emojiPickerCurrentPick)
   const botMeta = () => getBotMetaById(providerBot()) || null
@@ -30,7 +32,6 @@ export default (props: Props) => {
   }
 
   const handleOpenIconSelector = () => {
-    // TODO: Icon selector by `emoji-mart`
     showEmojiPickerModal.set(true)
     emojiPickerCurrentPick.listen((emoji) => {
       props.handleChange({ icon: emoji })
@@ -52,13 +53,13 @@ export default (props: Props) => {
       <input
         type="text"
         class="font-semibold mr-12 mb-3 px-1 truncate outline-0 bg-transparent placeholder:op-40"
-        placeholder="Untitled"
+        placeholder={t('conversations.untitled')}
         value={props.conversation.name}
         onBlur={e => props.handleChange({ name: e.currentTarget.value })}
       />
       <BotSelect value={props.conversation.bot} onChange={handleProviderBotChange} />
       <Show when={botMeta()?.type !== 'image_generation'}>
-        <div class="py-1 border bg-base-50 border-base rounded-lg text-sm">
+        <div class="py-1 border border-base rounded-lg text-sm">
           <div class="px-4 py-2">
             <h3 class="op-80 shrink-0">System Info</h3>
             <textarea

src/components/conversations/ConversationEditModal.tsx

@@ -31,7 +31,7 @@ export default () => {
           handleChange={handleChange}
         />
       </main>
-      <div class="fcc px-2 py-2 bg-darker border border-base mt-4 hv-base hover:border-darker" onClick={handleButtonClick}>{t('settings.save')}</div>
+      <div class="fcc px-2 py-2 bg-darker border border-base mt-4 hv-base hover:border-base-100" onClick={handleButtonClick}>{t('settings.save')}</div>
     </div>
   )
 }

src/components/conversations/ConversationSidebar.tsx

@@ -11,16 +11,25 @@ export default () => {
 
   return (
     <div class="h-full flex flex-col bg-sidebar">
-      <div class="h-14 fi border-b border-base px-4 text-xs uppercase pl-6">
-        {t('conversations.title')}
-      </div>
+      <header class="h-14 fi justify-between px-4 text-xs uppercase">
+        <p class="px-2">{t('conversations.title')}</p>
+        <div class="fi gap-1">
+          {/* <Button
+            icon="i-carbon-search"
+            onClick={() => {}}
+            size="sm"
+          /> */}
+          <ConversationSidebarAdd />
+        </div>
+      </header>
       <div class="flex-1 overflow-auto">
-        <For each={$conversationMapSortList()}>
-          {instance => (
-            <ConversationSidebarItem instance={instance} />
-          )}
-        </For>
-        <ConversationSidebarAdd />
+        <div class="px-2">
+          <For each={$conversationMapSortList()}>
+            {instance => (
+              <ConversationSidebarItem instance={instance} />
+            )}
+          </For>
+        </div>
       </div>
     </div>
   )

src/components/conversations/ConversationSidebarAdd.tsx

@@ -1,5 +1,6 @@
 import { useI18n } from '@/hooks'
 import { addConversation } from '@/stores/conversation'
+import Button from '../ui/Button'
 
 export default () => {
   const { t } = useI18n()
@@ -8,14 +9,12 @@ export default () => {
   }
 
   return (
-    <div
-      class="flex items-center h-18 px-4 gap-4 border-b border-l-4 border-l-transparent border-b-base hv-base"
+    <Button
+      icon="i-carbon-add"
       onClick={handleAdd}
+      size="sm"
     >
-      <div class="w-8 h-8 flex items-center justify-center op-60">
-        <div class="i-carbon-add text-2xl" />
-      </div>
-      <div class="op-60">{t('conversations.add')}</div>
-    </div>
+      {t('conversations.add')}
+    </Button>
   )
 }

src/components/conversations/ConversationSidebarItem.tsx

@@ -1,6 +1,7 @@
 import { useStore } from '@nanostores/solid'
 import { currentConversationId, deleteConversationById } from '@/stores/conversation'
 import { showConversationSidebar } from '@/stores/ui'
+import { useI18n } from '@/hooks'
 import type { Conversation } from '@/types/conversation'
 
 interface Props {
@@ -10,6 +11,7 @@ interface Props {
 }
 
 export default ({ instance }: Props) => {
+  const { t } = useI18n()
   const $currentConversationId = useStore(currentConversationId)
   const isTouchDevice = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
 
@@ -26,15 +28,15 @@ export default ({ instance }: Props) => {
   return (
     <div
       class={[
-        'group fi h-16 px-4 gap-3 border-b border-l-4 border-b-base hv-base',
-        instance.id === $currentConversationId() ? 'border-l-emerald-600' : 'border-l-transparent',
+        'group fi h-10 my-0.5 px-2 gap-2 hv-base rounded-md',
+        instance.id === $currentConversationId() ? 'bg-base-200' : '',
       ].join(' ')}
       onClick={handleClick}
     >
-      <div class="fcc w-8 h-8 rounded-full text-2xl shrink-0">
-        {instance.icon ? instance.icon : <div class="text-xl i-carbon-chat" />}
+      <div class="fcc w-8 h-8 rounded-full text-xl shrink-0">
+        {instance.icon ? instance.icon : <div class="text-base i-carbon-chat" />}
       </div>
-      <div class="flex-1 truncate">{ instance.name || 'Untitled' }</div>
+      <div class="flex-1 truncate text-sm">{ instance.name || t('conversations.untitled') }</div>
       <div class={isTouchDevice ? '' : 'hidden group-hover:block'}>
         <div
           class="inline-flex p-2 items-center gap-1 rounded-md hv-base"

src/components/header/ConversationHeaderInfo.tsx

@@ -1,8 +1,10 @@
 import { Show } from 'solid-js'
 import { useStore } from '@nanostores/solid'
 import { conversationMap, currentConversationId } from '@/stores/conversation'
+import { useI18n } from '@/hooks'
 
 export default () => {
+  const { t } = useI18n()
   const $conversationMap = useStore(conversationMap)
   const $currentConversationId = useStore(currentConversationId)
   const currentConversation = () => {
@@ -13,10 +15,10 @@ export default () => {
     <div class="fi gap-1 max-w-40vw px-2 overflow-hidden text-sm">
       <Show when={currentConversation()}>
         <Show when={currentConversation().icon}>
-          <div class="fcc w-8 h-8 rounded-full text-xl shrink-0 hidden md:flex">{currentConversation().icon}</div>
+          <div class="fcc -ml-2 w-8 h-8 rounded-full text-xl shrink-0 hidden md:flex">{currentConversation().icon}</div>
         </Show>
         <div class="truncate">
-          {currentConversation() ? (currentConversation().name || 'Untitled') : ''}
+          {currentConversation() ? (currentConversation().name || t('conversations.untitled')) : ''}
         </div>
       </Show>
     </div>

src/components/header/Header.tsx

@@ -13,7 +13,7 @@ export default () => {
     })
   })
   return (
-    <header onDblClick={scrollController().scrollToTop} class="shrink-0 absolute top-0 left-0 right-0 fi justify-between bg-base-100 border-b border-base h-14 px-4">
+    <header onDblClick={scrollController().scrollToTop} class="shrink-0 absolute top-0 left-0 right-0 fi justify-between border-b border-base h-14 px-4">
       <div class="fi overflow-hidden">
         <div
           class="fcc p-2 rounded-md text-xl hv-foreground md:hidden"

src/components/main/Continuous.tsx

@@ -40,7 +40,7 @@ export default (props: Props) => {
       <div class="scroll-list relative flex flex-col h-full overflow-y-scroll" ref={scrollRef!}>
         <For each={props.messages()}>
           {(message, index) => (
-            <div class="border-b border-lighter">
+            <div class="border-b border-base">
               <MessageItem
                 conversationId={props.conversationId}
                 message={message}

src/components/main/ConversationEmpty.tsx

@@ -1,5 +1,6 @@
 import { showConversationEditModal } from '@/stores/ui'
 import { getBotMetaById } from '@/stores/provider'
+import Button from '../ui/Button'
 import type { Conversation } from '@/types/conversation'
 
 interface Props {
@@ -9,17 +10,20 @@ interface Props {
 export default (props: Props) => {
   const botMeta = () => getBotMetaById(props.conversation.bot) || null
   return (
-    <div class="fi flex-col h-full py-4 overflow-auto px-6">
-      <div
-        class="inline-flex items-center gap-1 button"
+    <div class="fi flex-col h-full px-6 py-8 overflow-auto">
+      <Button
+        icon="i-carbon-settings-adjust"
         onClick={() => showConversationEditModal.set(true)}
+        size="sm"
+        variant="ghost"
       >
-        <div i-carbon-settings-adjust />
-        {botMeta().provider.name} / {botMeta().label}
-        {props.conversation.systemInfo && (
-          <div class="text-xs px-1 border border-darker rounded-md op-40">System Info</div>
-        )}
-      </div>
+        <div class="inline-flex items-center gap-1">
+          {botMeta().provider.name} / {botMeta().label}
+          {props.conversation.systemInfo && (
+            <div class="text-xs px-1 border border-base-100 rounded-md op-40">System Info</div>
+          )}
+        </div>
+      </Button>
     </div>
   )
 }

src/components/main/MessageItem.tsx

@@ -9,6 +9,7 @@ import { scrollController } from '@/stores/ui'
 import { globalAbortController } from '@/stores/settings'
 import StreamableText from '../StreamableText'
 import { DropDownMenu, Tooltip } from '../ui/base'
+import Button from '../ui/Button'
 import type { MenuItem } from '../ui/base'
 import type { MessageInstance } from '@/types/message'
 
@@ -98,7 +99,7 @@ export default (props: Props) => {
     <div
       class="p-6 break-words group relative"
       classList={{
-        'op-70 bg-darker': props.message.role === 'user',
+        'bg-base-100': props.message.role === 'user',
       }}
     >
       <div class="max-w-base flex gap-4 overflow-hidden">
@@ -135,9 +136,9 @@ export default (props: Props) => {
               class="op-70 bg-darker py-4 px-[calc(max(1.5rem,(100%-48rem)/2))] w-full inset-0 scroll-pa-4 input-base rounded-md"
             />
 
-            <div class="flex justify-end space-x-2 -mt-1">
-              <div class="inline-flex items-center button" onClick={() => setIsEditing(false)}>Cancel</div>
-              <div class="inline-flex items-center button" onClick={() => handleSend()}>Submit</div>
+            <div class="flex justify-end space-x-2 mt-1">
+              <Button size="sm" onClick={() => setIsEditing(false)}>Cancel</Button>
+              <Button size="sm" onClick={() => handleSend()}>Submit</Button>
             </div>
           </Show>
           <Show when={!isEditing()}>