feat: add selectMessageModal

src/components/ModalsLayer.tsx

@@ -2,6 +2,7 @@ import {
   showConversationEditModal,
   showConversationSidebar,
   showEmojiPickerModal,
+  showSelectMessageModal,
   showSettingsSidebar,
   showShareModal,
 } from '@/stores/ui'
@@ -10,6 +11,7 @@ import SettingsSidebar from './settings/SettingsSidebar'
 import ConversationEditModal from './conversations/ConversationEditModal'
 import EmojiPickerModal from './ui/EmojiPickerModal'
 import ShareModal from './ui/ShareModal'
+import SelectMessageModal from './ui/SelectMessageModal'
 import Modal from './ui/Modal'
 
 export default () => {
@@ -40,6 +42,11 @@ export default () => {
           <ShareModal />
         </div>
       </Modal>
+      <Modal bindValue={showSelectMessageModal} direction="bottom" closeBtnClass="top-4 right-4">
+        <div class="max-h-[70vh] w-full">
+          <SelectMessageModal />
+        </div>
+      </Modal>
     </>
   )
 }

src/components/ui/SelectMessageModal.tsx

@@ -0,0 +1,31 @@
+import { useStore } from '@nanostores/solid'
+import { For } from 'solid-js'
+import { useI18n } from '@/hooks'
+import { currentConversationId } from '@/stores/conversation'
+import { getMessagesByConversationId } from '@/stores/messages'
+import { Checkbox } from '../ui/base'
+
+export default () => {
+  const { t } = useI18n()
+  const $currentConversationId = useStore(currentConversationId)
+  const messages = getMessagesByConversationId($currentConversationId())
+
+  console.log($currentConversationId(), messages)
+  return (
+    <div class="w-full">
+      <div class="fi px-6 py-4 border-base b-b-1">
+        <div class="text-base">{t('conversations.share.messages.title')}</div>
+      </div>
+      <div class="flex flex-col p-6 h-100 overflow-auto relative">
+        <For each={messages}>
+          {item => (
+            <div class="border border-base b-b-0 last:b-b-1 p-4" >
+              <Checkbox initValue label={`${item.role}: ${item.content}`} />
+            </div>
+          )}
+        </For>
+      </div>
+      <div class="fcc px-2 py-2 bg-darker border border-base hv-base hover:border-base-100" >{t('settings.save')}</div>
+    </div>
+  )
+}

src/components/ui/ShareModal.tsx

@@ -3,6 +3,7 @@ import { For } from 'solid-js'
 import { useClipboardCopy, useI18n } from '@/hooks'
 import { currentConversationId } from '@/stores/conversation'
 import { getMessagesByConversationId } from '@/stores/messages'
+import { showSelectMessageModal, showShareModal } from '@/stores/ui'
 import { Tabs } from '../ui/base'
 import type { TabItem } from './base/Tabs'
 
@@ -20,7 +21,7 @@ export default () => {
       value: 'context',
       label: t('conversations.share.tabs.context'),
       content: <div class="flex flex-col gap-2">
-        <div class="emerald-light-button mt-0 cursor-pointer" onClick={() => copy()}>{copied() ? t('copyed') : t('conversations.share.copy')}</div>
+        <div class="emerald-light-button mt-0 cursor-pointer mb-2" onClick={() => copy()}>{copied() ? t('copyed') : t('conversations.share.copy')}</div>
         <For each={messages}>
           {item => (
             <div class="flex space-x-2">
@@ -45,7 +46,13 @@ export default () => {
         <button class="button mt-0">{t('conversations.share.link.create')}</button>
       </div>
       <div class="fcc flex-col space-y-2 p-6">
-        <div class="border w-full border-base fi justify-between box-border p-4 rounded-md hv-base">
+        <div
+          class="border w-full border-base fi justify-between box-border p-4 rounded-md hv-base"
+          onclick={() => {
+            showShareModal.set(false)
+            showSelectMessageModal.set(true)
+          }}
+        >
           <span class="text-xs">{t('conversations.share.messages.selected')}</span>
           <span class="text-xs op-60">2 Messages</span>
         </div>

src/components/ui/base/Checkbox.tsx

@@ -8,17 +8,26 @@ interface Props {
 }
 
 export const Checkbox = (props: Props) => {
-  const [state, send] = useMachine(checkbox.machine({ id: createUniqueId(), checked: props.initValue ?? false }))
+  const [state, send] = useMachine(checkbox.machine({
+    id: createUniqueId(),
+    checked: props.initValue ?? false,
+    onChange(detail) {
+      console.log('onChange', detail)
+    },
+  }))
 
   const api = createMemo(() => checkbox.connect(state, send, normalizeProps))
 
   return (
     <label {...api().rootProps}>
-      <span {...api().labelProps}>
-        {props.label}
-      </span>
-      <input {...api().inputProps} />
-      <div {...api().controlProps} />
+      <div class="fi justify-revert cursor-pointer text-sm">
+        <input {...api().inputProps} />
+        {api().isChecked ? <div class="i-carbon:checkbox-checked text-xl" /> : <div class="i-carbon:checkbox text-xl" />}
+        <div {...api().labelProps} class="ml-2 truncate flex-1">
+          {props.label}
+        </div>
+        <div {...api().controlProps} />
+      </div>
     </label>
   )
 }

src/components/ui/base/Tabs.tsx

@@ -23,7 +23,7 @@ export const Tabs = (props: Props) => {
 
   return (
     <div {...api().rootProps} class="w-full text-sm font-medium text-center">
-      <div {...api().tablistProps} class={`flex flex-wrap -mb-px border-b border-base ${props.sticky && 'sticky top-0 bottom-0'} ${props.tabClass}`}>
+      <div {...api().tablistProps} class={`flex flex-wrap -mb-px border-b border-base ${props.sticky && 'sticky top-0 bottom-0 bg-white'} ${props.tabClass}`}>
         <For each={props.tabs}>
           {item => (
             <button class={`inline-block p-4 border-b-2 border-transparent hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-300 cursor-pointer ${api().value === item.value && '!border-emerald-600 !text-emerald-600'}`} {...api().getTriggerProps({ value: item.value })}>

src/stores/ui.ts

@@ -7,6 +7,7 @@ export const showConversationEditModal = atom(false)
 export const showEmojiPickerModal = atom(false)
 export const showConfirmModal = atom(false)
 export const showShareModal = atom(false)
+export const showSelectMessageModal = atom(false)
 
 export const isSendBoxFocus = atom(false)
 export const currentErrorMessage = atom<ErrorMessage | null>(null)