feat: use html2Canvas to save image

anse-app · Jun 15, 2023 · e782915 · e782915
1 parent 75b67e2
commit e782915
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 196 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,6 @@
     "@astrojs/vercel": "^3.2.2",
     "@mapbox/rehype-prism": "^0.8.0",
     "@nanostores/solid": "^0.3.2",
-    "@resvg/resvg-wasm": "^2.3.1",
     "@solid-primitives/clipboard": "^1.5.4",
     "@solid-primitives/keyboard": "^1.1.0",
     "@solid-primitives/scheduled": "^1.3.2",
@@ -55,7 +54,6 @@
     "remark-math": "^5.1.1",
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",
-    "satori": "^0.10.1",
     "solid-emoji-picker": "^0.2.0",
     "solid-js": "1.6.12",
     "solid-transition-group": "^0.2.2",
@@ -71,6 +69,7 @@
     "@unocss/preset-icons": "^0.50.6",
     "@unocss/preset-typography": "^0.50.6",
     "eslint-plugin-astro": "^0.24.0",
+    "html2canvas": "^1.4.1",
     "lint-staged": "^13.2.2",
     "punycode": "^2.3.0",
     "simple-git-hooks": "^2.8.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/main/Continuous.tsx b/src/components/main/Continuous.tsx
@@ -38,18 +38,35 @@ export default (props: Props) => {
   return (
     <>
       <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-base">
-              <MessageItem
-                conversationId={props.conversationId}
-                message={message}
-                handleStreaming={handleStreamableTextUpdate}
-                index={index()}
-              />
-            </div>
-          )}
-        </For>
+        <div class="w-full max-w-screen-xl">
+          <For each={props.messages()}>
+            {(message, index) => (
+              <div class="border-b border-base">
+                <MessageItem
+                  conversationId={props.conversationId}
+                  message={message}
+                  handleStreaming={handleStreamableTextUpdate}
+                  index={index()}
+                />
+              </div>
+            )}
+          </For>
+        </div>
+        {/* use for html2Canvas */}
+        <div id="message_list_wrapper" class="w-full max-w-screen-xl m-auto clipped hidden">
+          <For each={props.messages().filter(item => item.isSelected)}>
+            {(message, index) => (
+              <div class="border-b border-base">
+                <MessageItem
+                  conversationId={props.conversationId}
+                  message={message}
+                  handleStreaming={handleStreamableTextUpdate}
+                  index={index()}
+                />
+              </div>
+            )}
+          </For>
+        </div>
       </div>
       <Show when={!isScrollBottom() && !$isSendBoxFocus()}>
         <div

diff --git a/src/components/main/MessageItem.tsx b/src/components/main/MessageItem.tsx
@@ -106,7 +106,7 @@ export default (props: Props) => {
 
   return (
     <div
-      class="p-6 break-words group relative"
+      class="p-6 break-words group relative bg-base"
       classList={{
         'bg-base-100': props.message.role === 'user',
       }}