feat: add context copy

anse-app · May 25, 2023 · e32b56b · e32b56b
1 parent 290b442
commit e32b56b
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 7 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -8,6 +8,7 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': 'warn',
     'react/jsx-key': 'off',
     'import/namespace': 'off',
+    'react/jsx-closing-tag-location': 'off',
   },
   overrides: [
     {

diff --git a/src/components/ui/ShareModal.tsx b/src/components/ui/ShareModal.tsx
@@ -1,15 +1,35 @@
-import { useI18n } from '@/hooks'
+import { useStore } from '@nanostores/solid'
+import { For } from 'solid-js'
+import { useClipboardCopy, useI18n } from '@/hooks'
+import { currentConversationId } from '@/stores/conversation'
+import { getMessagesByConversationId } from '@/stores/messages'
 import { Tabs } from '../ui/base'
 import type { TabItem } from './base/Tabs'
 
 export default () => {
   const { t } = useI18n()
+  const $currentConversationId = useStore(currentConversationId)
+  const messages = getMessagesByConversationId($currentConversationId())
+
+  console.log($currentConversationId(), messages)
+
+  const [copied, copy] = useClipboardCopy(messages.map(item => `${item.role}: ${item.content}`).join('\n'))
 
   const tabs: TabItem[] = [
     {
       value: 'context',
       label: t('conversations.share.tabs.context'),
-      content: <div class="flex">context</div>,
+      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>
+        <For each={messages}>
+          {item => (
+            <div class="flex space-x-2">
+              <div class="font-bold w-20 text-left">{item.role}:</div>
+              <div class="text-left flex-1">{item.content}</div>
+            </div>
+          )}
+        </For>
+      </div>,
     },
     {
       value: 'image',
@@ -22,14 +42,14 @@ export default () => {
     <div class="w-full">
       <div class="fi justify-between border-base b-b-1 px-6 py-4">
         <div class="text-base">{t('conversations.share.link.title')}</div>
-        <button class="emerald-button mt-0">{t('conversations.share.link.create')}</button>
+        <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">
           <span class="text-xs">{t('conversations.share.messages.selected')}</span>
           <span class="text-xs op-60">2 Messages</span>
         </div>
-        <Tabs tabs={tabs} />
+        <Tabs tabs={tabs} sticky tabClass="bg-base-100" />
       </div>
     </div>
   )

diff --git a/src/components/ui/base/Tabs.tsx b/src/components/ui/base/Tabs.tsx
@@ -12,6 +12,8 @@ export interface TabItem {
 interface Props {
   tabs: TabItem[]
   initValue?: string
+  sticky?: boolean
+  tabClass?: string
 }
 
 export const Tabs = (props: Props) => {
@@ -21,18 +23,18 @@ 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">
+      <div {...api().tablistProps} class={`flex flex-wrap -mb-px border-b border-base ${props.sticky && 'sticky top-0 bottom-0'} ${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 })}>
+            <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 })}>
               {item.label}
             </button>
           )}
         </For>
       </div>
       <For each={props.tabs}>
         {item => (
-          <div class="w-full p-4 text-sm mt-4 border border-base" {...api().getContentProps({ value: item.value })}>
+          <div class="w-full text-sm mt-4 border border-base p-4" {...api().getContentProps({ value: item.value })}>
             {item.content}
           </div>
         )}

diff --git a/src/locale/lang/en.ts b/src/locale/lang/en.ts
@@ -38,6 +38,7 @@ export const en = {
           create: 'Create Link',
         },
         save: 'Save',
+        copy: 'Copy Context',
         messages: {
           title: 'Select Message',
           selected: 'Selected Messages',
@@ -51,5 +52,6 @@ export const en = {
     send: {
       placeholder: 'Enter Something...',
     },
+    copyed: 'Copyed!',
   },
 } as language
diff --git a/src/locale/lang/zh-cn.ts b/src/locale/lang/zh-cn.ts
@@ -38,6 +38,7 @@ export const zhCN = {
           create: '创建链接',
         },
         save: '保存',
+        copy: '复制上下文',
         messages: {
           title: '选择消息',
           selected: '已选择的消息',
@@ -51,5 +52,6 @@ export const zhCN = {
     send: {
       placeholder: '输入内容...',
     },
+    copyed: '已拷贝!',
   },
 } as language