feat: add tailwindcss support, add copy image btn

anse-app · Jun 12, 2023 · 75b67e2 · 75b67e2
1 parent a130017
commit 75b67e2
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 9 deletions.
diff --git a/src/components/ui/ShareModal.tsx b/src/components/ui/ShareModal.tsx
@@ -1,8 +1,8 @@
 import { useStore } from '@nanostores/solid'
-import { For, Show, createSignal } from 'solid-js'
+import { For, Show, createEffect, createSignal } from 'solid-js'
 import satori from 'satori'
 import * as resvg from '@resvg/resvg-wasm'
-import { useClipboardCopy, useI18n } from '@/hooks'
+import { useClipboardCopy, useDark, useI18n } from '@/hooks'
 import { currentConversationId } from '@/stores/conversation'
 import { getMessagesByConversationId } from '@/stores/messages'
 import { showSelectMessageModal, showShareModal } from '@/stores/ui'
@@ -14,24 +14,43 @@ export default () => {
   const $currentConversationId = useStore(currentConversationId)
   const messages = getMessagesByConversationId($currentConversationId()).filter(item => item.isSelected)
   const [imageUrl, setImageUrl] = createSignal('')
+  const [imageBuffer, setImageBuffer] = createSignal<Blob>()
   const [loading, setLoading] = createSignal(false)
+  const [isDark] = useDark()
 
   console.log($currentConversationId(), messages)
 
   const [copied, copy] = useClipboardCopy(messages.map(item => `${item.role}: ${item.content}`).join('\n'))
 
+  const copyImage = () => {
+    const [,copy] = useClipboardCopy(imageBuffer()!)
+    copy()
+  }
+
+  createEffect(async() => {
+    try {
+      await resvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'))
+    } catch (error) {
+    }
+  }, [])
+
   const handleLoadImage = async() => {
     let _result = ''
     setLoading(true)
     try {
       const fontData = await fetch('https://cdn.jsdelivr.net/gh/yzh990918/static@master/20230609/Inter-Medium.388xm374fse8.ttf').then(res => res.arrayBuffer())
       _result = await satori(
-        // TODO: context image dom
         {
           type: 'div',
           props: {
-            children: 'hello, world',
-            style: { color: 'black' },
+            tw: isDark() ? 'flex flex-col items-stretch w-full h-full text-white bg-[#3333333] p-0' : 'flex flex-col items-stretch w-full h-full text-black  bg-white/90 p-0',
+            children: messages.map(item => ({
+              type: 'div',
+              props: {
+                tw: 'flex items-center w-full h-12 px-4',
+                children: item.content as string,
+              },
+            })),
           },
         },
         {
@@ -46,7 +65,6 @@ export default () => {
           ],
         },
       )
-      await resvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'))
       const res = new resvg.Resvg(_result, {
         fitTo: {
           mode: 'width',
@@ -56,6 +74,7 @@ export default () => {
 
       const png = res.render()
       const pngBuffer = png.asPng()
+      setImageBuffer(new Blob([pngBuffer], { type: 'image/png' }))
       const url = URL.createObjectURL(new Blob([pngBuffer], { type: 'image/png' }))
       if (url) {
         setLoading(false)
@@ -100,7 +119,8 @@ export default () => {
             <div class="flex flex-col gap-2">
               <div class="inline-block text-left">
                 <Show when={imageUrl().length}>
-                  <div class="button inline-block mt-0 cursor-pointer mb-2" onClick={() => { window.open(imageUrl()) }}>{t('conversations.share.image.open')}</div>
+                  <div class="button inline-block mt-0 cursor-pointer mb-2" onClick={() => { copyImage() }}>{t('conversations.share.image.copy')}</div>
+                  <div class="button inline-block mt-0 cursor-pointer mb-2 ml-2" onClick={() => { window.open(imageUrl()) }}>{t('conversations.share.image.open')}</div>
                 </Show>
                 <Show when={!imageUrl().length}>
                   <div class="emerald-light-button inline-block mt-0 cursor-pointer mb-2" onClick={() => handleLoadImage()}>{loading() ? t('conversations.share.image.loading') : t('conversations.share.image.btn')}</div>

diff --git a/src/hooks/useCopy.ts b/src/hooks/useCopy.ts
@@ -1,11 +1,11 @@
 import { createEffect, createSignal } from 'solid-js'
 import { writeClipboard } from '@solid-primitives/clipboard'
 
-export const useClipboardCopy = (source: string, delay = 1000) => {
+export const useClipboardCopy = (source: string | Blob, delay = 1000) => {
   const [copied, setCopied] = createSignal(false)
 
   const copy = async() => {
-    writeClipboard(source)
+    writeClipboard(typeof source === 'string' ? source : [new ClipboardItem({ [source.type]: source })])
     setCopied(true)
   }
 

diff --git a/src/locale/lang/en.ts b/src/locale/lang/en.ts
@@ -52,6 +52,7 @@ export const en = {
           btn: 'Generate Image',
           open: 'Open in Tab',
           loading: 'Generating...',
+          copy: 'Copy Image',
         },
       },
     },

diff --git a/src/locale/lang/zh-cn.ts b/src/locale/lang/zh-cn.ts
@@ -52,6 +52,7 @@ export const zhCN = {
           btn: '生成图片',
           open: '新窗口打开',
           loading: '生成中...',
+          copy: '复制图片',
         },
       },
     },