From 100b6bd9d41a014af6e422b706bf53ba0235299b Mon Sep 17 00:00:00 2001 From: yzh990918 <251205668@qq.com> Date: Mon, 22 May 2023 15:49:01 +0800 Subject: [PATCH 01/18] feat: add export icon --- .../header/ConversationMessageShareButton.tsx | 22 +++++++++++++++++++ src/components/header/Header.tsx | 2 ++ src/components/main/MessageItem.tsx | 3 +-- 3 files changed, 25 insertions(+), 2 deletions(-) create mode 100644 src/components/header/ConversationMessageShareButton.tsx diff --git a/src/components/header/ConversationMessageShareButton.tsx b/src/components/header/ConversationMessageShareButton.tsx new file mode 100644 index 00000000..f7b678df --- /dev/null +++ b/src/components/header/ConversationMessageShareButton.tsx @@ -0,0 +1,22 @@ +import { useStore } from '@nanostores/solid' +import { currentConversationId } from '@/stores/conversation' + +export default () => { + const $currentConversationId = useStore(currentConversationId) + + const handleClearMessage = () => { + } + + return ( + <> + {$currentConversationId() && ( +
+
+
+ )} + + ) +} diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index c3966343..098c6b49 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -3,6 +3,7 @@ import { scrollController, showConversationSidebar, showSettingsSidebar } from ' import { useLargeScreen } from '@/hooks' import ConversationHeaderInfo from './ConversationHeaderInfo' import ConversationMessageClearButton from './ConversationMessageClearButton' +import ConversationMessageShareButton from './ConversationMessageShareButton' export default () => { onMount(() => { @@ -25,6 +26,7 @@ export default () => {
+
showSettingsSidebar.set(true)} diff --git a/src/components/main/MessageItem.tsx b/src/components/main/MessageItem.tsx index 1315e3b6..16597541 100644 --- a/src/components/main/MessageItem.tsx +++ b/src/components/main/MessageItem.tsx @@ -77,11 +77,10 @@ export default (props: Props) => { const [menuList, setMenuList] = createSignal([ { id: 'retry', label: 'Retry send', icon: 'i-carbon:restart', role: 'all', action: handleRetryMessageItem }, { id: 'raw', label: 'Show raw code', icon: 'i-carbon-code', role: 'system', action: () => setShowRawCode(!showRawCode()) }, - // TODO: Share message - // { id: 'share', label: 'Share message', icon: 'i-carbon:share' }, { id: 'edit', label: 'Edit message', icon: 'i-carbon:edit', role: 'user', action: handleEditMessageItem }, { id: 'copy', label: 'Copy message', icon: 'i-carbon-copy', role: 'all', action: handleCopyMessageItem }, { id: 'delete', label: 'Delete message', icon: 'i-carbon-trash-can', role: 'all', action: handleDeleteMessageItem }, + { id: 'share', label: 'Share message', icon: 'i-carbon:export', role: 'all' }, ]) if (props.message.role === 'user') From b95b3696c1fb70410ee8061040257610a6abafe9 Mon Sep 17 00:00:00 2001 From: yzh990918 <251205668@qq.com> Date: Tue, 23 May 2023 13:54:07 +0800 Subject: [PATCH 02/18] feat: add ShareMessage modal and locales --- src/locale/lang/en.ts | 16 ++++++++++++++++ src/locale/lang/zh-cn.ts | 16 ++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/src/locale/lang/en.ts b/src/locale/lang/en.ts index 84f19d3c..e2dadd81 100644 --- a/src/locale/lang/en.ts +++ b/src/locale/lang/en.ts @@ -31,6 +31,22 @@ export const en = { btn: 'confirm', cancel: 'cancel', }, + share: { + link: { + title: 'Share with link', + copy: 'Copy Link', + create: 'Create Link', + }, + save: 'Save', + messages: { + title: 'Select Message', + selected: 'Selected Messages', + }, + tabs: { + context: 'Share Context', + image: 'Share Image', + }, + }, }, send: { placeholder: 'Enter Something...', diff --git a/src/locale/lang/zh-cn.ts b/src/locale/lang/zh-cn.ts index 9dbc92c5..136f1146 100644 --- a/src/locale/lang/zh-cn.ts +++ b/src/locale/lang/zh-cn.ts @@ -31,6 +31,22 @@ export const zhCN = { btn: '确认', cancel: '取消', }, + share: { + link: { + title: '分享链接', + copy: '复制链接', + create: '创建链接', + }, + save: '保存', + messages: { + title: '选择消息', + selected: '已选择的消息', + }, + tabs: { + context: '分享上下文', + image: '分享图片', + }, + }, }, send: { placeholder: '输入内容...', From 290b4427f6eefafc00f94f82dee3fe67cf2f86db Mon Sep 17 00:00:00 2001 From: yzh990918 <251205668@qq.com> Date: Tue, 23 May 2023 18:38:54 +0800 Subject: [PATCH 03/18] feat(ui): add Tabs Checkbox component, update ShareModal styles --- package.json | 2 + pnpm-lock.yaml | 31 ++++++++++++++ src/components/ModalsLayer.tsx | 7 ++++ .../header/ConversationMessageShareButton.tsx | 6 +-- src/components/ui/ShareModal.tsx | 36 ++++++++++++++++ src/components/ui/base/Checkbox.tsx | 24 +++++++++++ src/components/ui/base/Tabs.tsx | 42 +++++++++++++++++++ src/components/ui/base/index.ts | 2 + src/stores/ui.ts | 1 + unocss.config.ts | 1 + 10 files changed, 148 insertions(+), 4 deletions(-) create mode 100644 src/components/ui/ShareModal.tsx create mode 100644 src/components/ui/base/Checkbox.tsx create mode 100644 src/components/ui/base/Tabs.tsx diff --git a/package.json b/package.json index 39cfc99e..29a6be37 100644 --- a/package.json +++ b/package.json @@ -27,12 +27,14 @@ "@solid-primitives/scheduled": "^1.3.2", "@solid-primitives/scroll": "^2.0.14", "@unocss/reset": "^0.50.6", + "@zag-js/checkbox": "^0.9.2", "@zag-js/dialog": "^0.9.2", "@zag-js/menu": "^0.9.2", "@zag-js/select": "^0.9.2", "@zag-js/slider": "^0.9.2", "@zag-js/solid": "^0.9.2", "@zag-js/switch": "^0.9.2", + "@zag-js/tabs": "^0.9.2", "@zag-js/toast": "^0.9.2", "@zag-js/toggle": "^0.9.2", "@zag-js/tooltip": "^0.9.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 13f3ab47..c005f318 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -34,6 +34,9 @@ dependencies: '@unocss/reset': specifier: ^0.50.6 version: 0.50.6 + '@zag-js/checkbox': + specifier: ^0.9.2 + version: 0.9.2 '@zag-js/dialog': specifier: ^0.9.2 version: 0.9.2 @@ -52,6 +55,9 @@ dependencies: '@zag-js/switch': specifier: ^0.9.2 version: 0.9.2 + '@zag-js/tabs': + specifier: ^0.9.2 + version: 0.9.2 '@zag-js/toast': specifier: ^0.9.2 version: 0.9.2 @@ -2675,6 +2681,18 @@ packages: '@zag-js/dom-query': 0.9.2 dev: false + /@zag-js/checkbox@0.9.2: + resolution: {integrity: sha512-xtOTsPURdmTaP7D1AjjMBPnLnGfZV5ZRoWYEqKbR6QoIMBkHoQxyEp/NdE6R2w7hxgKB2vp1DGECFAhSxVu/aw==} + dependencies: + '@zag-js/anatomy': 0.9.2 + '@zag-js/core': 0.9.2 + '@zag-js/dom-query': 0.9.2 + '@zag-js/form-utils': 0.9.2 + '@zag-js/types': 0.9.2 + '@zag-js/utils': 0.9.2 + '@zag-js/visually-hidden': 0.9.2 + dev: false + /@zag-js/core@0.9.2: resolution: {integrity: sha512-L8MwOCuKnOdWqjSRlgb8HQYuD29yRmi0PrTip+T42YK4+SiBiROeGcExYH2txIpVCk3Gww8TU5TzOHDvKCACyA==} dependencies: @@ -2847,6 +2865,19 @@ packages: '@zag-js/dom-query': 0.9.2 dev: false + /@zag-js/tabs@0.9.2: + resolution: {integrity: sha512-6/CzpzsXYnyGpeXrApc+wOi7wSLIGFQXJ8BoVU8QHKpWF6fEL4T40VJVWJJKzpnEMKepyHj2Zz9i15lfuqQAcw==} + dependencies: + '@zag-js/anatomy': 0.9.2 + '@zag-js/core': 0.9.2 + '@zag-js/dom-event': 0.9.2 + '@zag-js/dom-query': 0.9.2 + '@zag-js/element-rect': 0.9.2 + '@zag-js/tabbable': 0.9.2 + '@zag-js/types': 0.9.2 + '@zag-js/utils': 0.9.2 + dev: false + /@zag-js/text-selection@0.9.2: resolution: {integrity: sha512-xaXeLb9U7wZ5kEZ/L/if5INcX2YWi+Yzr8KIH2cNUaRE79cJFf0z1JG4D8VmO40EnCE396DVyNeLFdQXOAsu4Q==} dependencies: diff --git a/src/components/ModalsLayer.tsx b/src/components/ModalsLayer.tsx index 885096dc..143afab8 100644 --- a/src/components/ModalsLayer.tsx +++ b/src/components/ModalsLayer.tsx @@ -3,11 +3,13 @@ import { showConversationSidebar, showEmojiPickerModal, showSettingsSidebar, + showShareModal, } from '@/stores/ui' import ConversationSidebar from './conversations/ConversationSidebar' import SettingsSidebar from './settings/SettingsSidebar' import ConversationEditModal from './conversations/ConversationEditModal' import EmojiPickerModal from './ui/EmojiPickerModal' +import ShareModal from './ui/ShareModal' import Modal from './ui/Modal' export default () => { @@ -33,6 +35,11 @@ export default () => {
+ +
+ +
+ ) } diff --git a/src/components/header/ConversationMessageShareButton.tsx b/src/components/header/ConversationMessageShareButton.tsx index f7b678df..9601b027 100644 --- a/src/components/header/ConversationMessageShareButton.tsx +++ b/src/components/header/ConversationMessageShareButton.tsx @@ -1,18 +1,16 @@ import { useStore } from '@nanostores/solid' import { currentConversationId } from '@/stores/conversation' +import { showShareModal } from '@/stores/ui' export default () => { const $currentConversationId = useStore(currentConversationId) - const handleClearMessage = () => { - } - return ( <> {$currentConversationId() && (
{ showShareModal.set(true) }} >
diff --git a/src/components/ui/ShareModal.tsx b/src/components/ui/ShareModal.tsx new file mode 100644 index 00000000..2bcbb730 --- /dev/null +++ b/src/components/ui/ShareModal.tsx @@ -0,0 +1,36 @@ +import { useI18n } from '@/hooks' +import { Tabs } from '../ui/base' +import type { TabItem } from './base/Tabs' + +export default () => { + const { t } = useI18n() + + const tabs: TabItem[] = [ + { + value: 'context', + label: t('conversations.share.tabs.context'), + content:
context
, + }, + { + value: 'image', + label: t('conversations.share.tabs.image'), + content:
image
, + }, + ] + + return ( +
+
+
{t('conversations.share.link.title')}
+ +
+
+
+ {t('conversations.share.messages.selected')} + 2 Messages +
+ +
+
+ ) +} diff --git a/src/components/ui/base/Checkbox.tsx b/src/components/ui/base/Checkbox.tsx new file mode 100644 index 00000000..bcd4a749 --- /dev/null +++ b/src/components/ui/base/Checkbox.tsx @@ -0,0 +1,24 @@ +import * as checkbox from '@zag-js/checkbox' +import { normalizeProps, useMachine } from '@zag-js/solid' +import { createMemo, createUniqueId } from 'solid-js' + +interface Props { + initValue?: boolean + label: string +} + +export const Checkbox = (props: Props) => { + const [state, send] = useMachine(checkbox.machine({ id: createUniqueId(), checked: props.initValue ?? false })) + + const api = createMemo(() => checkbox.connect(state, send, normalizeProps)) + + return ( +