feat: v4.20.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "surmon.me",
-  "version": "4.19.7",
+  "version": "4.20.0",
   "description": "Surmon.me blog",
   "author": "Surmon",
   "license": "MIT",

src/bff.ts

@@ -15,7 +15,6 @@ import { getSitemapXml } from './server/getters/sitemap'
 import { getGTagScript } from './server/getters/gtag'
 import { getAllWallpapers } from './server/getters/wallpaper'
 import { getMyGoogleMap } from './server/getters/my-google-map'
-import { getChatGPTShareLink } from './server/getters/chatgpt'
 import { getTwitterAggregate } from './server/getters/twitter'
 import { getGitHubSponsors, getGitHubContributions } from './server/getters/github'
 import {
@@ -129,26 +128,6 @@ createExpressApp().then(async ({ app, server, cache }) => {
     })
   )
 
-  // ChatGPT share link
-  app.get(`${BFF_TUNNEL_PREFIX}/${TunnelModule.ChatGPT}`, (request, response, next) => {
-    const shareId = request.query.id
-    if (!shareId || typeof shareId !== 'string') {
-      errorer(response, { code: BAD_REQUEST, message: 'Invalid params' })
-      return
-    }
-
-    responser(() => {
-      return cacher({
-        cache,
-        key: `chatgpt_share_${shareId}`,
-        ttl: 60 * 60 * 24 * 30, // 30 days
-        retryWhen: 0, // never retry
-        preRefresh: false,
-        getter: () => getChatGPTShareLink(shareId)
-      })
-    })(request, response, next)
-  })
-
   // My GoogleMap
   app.get(
     `${BFF_TUNNEL_PREFIX}/${TunnelModule.MyGoogleMap}`,

src/components/comment/helper.ts

@@ -9,8 +9,8 @@ import { getAssetURL } from '/@/transforms/url'
 export const EMOJIS = [
   ...['😃', '😂', '😅', '😉', '😌', '😔', '😓', '😢', '😍', '😘', '😜', '😡'],
   ...['😤', '😭', '😱', '😳', '😵', '🌚'],
-  ...['🙏', '👆', '👇', '👌', '🤘', '👍', '👎', '💪', '👏'],
-  ...['🌻', '🌹', '💊', '🐶', '❤️‍🔥', '💔', '💩', '👻', '🚩']
+  ...['🙏', '💪', '👌', '🤘', '👍', '👎', '👏'],
+  ...['🌻', '🌹', '💊', '🐶', '🐈', '✨', '❤️‍🔥', '💔', '💩', '👻', '🚩']
 ]
 
 export enum CommentEvents {

src/components/comment/publisher/pen.vue

@@ -169,15 +169,8 @@
             <i class="iconfont icon-emoji" />
             <div class="emoji-box">
               <ul class="emoji-list">
-                <li
-                  v-for="(emoji, index) in EMOJIS"
-                  v-once
-                  class="item"
-                  :key="index"
-                  :title="emoji"
-                  @click="insertEmoji(emoji)"
-                >
-                  {{ emoji }}
+                <li v-for="(emoji, index) in EMOJIS" v-once class="item" :key="index" @click="insertEmoji(emoji)">
+                  <span>{{ emoji }}</span>
                 </li>
               </ul>
             </div>
@@ -355,12 +348,16 @@
               .item {
                 cursor: pointer;
                 padding: $xs-gap 0;
-                font-size: $font-size-h2;
-                opacity: 0.8;
-                transition: all $transition-time-fast ease;
+                > span {
+                  display: block;
+                  font-size: $font-size-h2;
+                  opacity: 0.8;
+                }
                 &:hover {
-                  opacity: 1;
-                  transform: scale(1.1);
+                  > span {
+                    opacity: 1;
+                    transform: scale(1.4);
+                  }
                 }
               }
             }

src/pages/article/chatgpt.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
   import { computed } from 'vue'
-  import type { ChatGPTShareLink } from '/@/server/getters/chatgpt'
   import { getChatGPTShareURL } from '/@/transforms/chatgpt'
   import Markdown from '/@/components/common/markdown.vue'
 
   const props = defineProps<{
-    shareId: string
-    data: ChatGPTShareLink
+    gptId: string
+    gptResponse: string
+    gptModel?: string
+    gptTimestamp?: string
     hiddenAvatar?: boolean
   }>()
 
@@ -19,41 +20,36 @@
   }
 
   const avatarURL = computed(() => {
-    const fileName = props.data.model.includes('4') ? '4.0' : '3.5'
+    const fileName = props.gptModel?.includes('4') ? '4.0' : '3.5'
     return `/images/chatgpt/${fileName}.png`
   })
-
-  const htmlContent = computed(() => {
-    const content = props.data.first_answer ?? ''
-    return '<p>' + content.replaceAll('\n\n', '</p><p>') + '</p>'
-  })
 </script>
 
 <template>
   <div class="gpt-comment" :class="{ 'hide-avatar': hiddenAvatar }">
     <div class="gpt-avatar" v-if="!hiddenAvatar">
-      <ulink class="link" :href="getChatGPTShareURL(shareId)" @click="handleLinkClick">
-        <uimage cdn :src="avatarURL" :alt="data.model" draggable="false" />
+      <ulink class="link" :href="getChatGPTShareURL(gptId)" @click="handleLinkClick">
+        <uimage cdn :src="avatarURL" :alt="gptModel" draggable="false" />
       </ulink>
     </div>
     <div class="gpt-body">
       <div class="gpt-header">
         <div class="left">
-          <ulink class="username" :href="getChatGPTShareURL(shareId)" @click="handleLinkClick">ChatGPT</ulink>
-          <span class="model">
+          <ulink class="username" :href="getChatGPTShareURL(gptId)" @click="handleLinkClick">ChatGPT</ulink>
+          <span class="model" v-if="gptModel">
             <i class="iconfont icon-cpu"></i>
-            <span>{{ data.model }}</span>
+            <span>{{ gptModel }}</span>
           </span>
         </div>
         <div class="right">
-          <span class="created">
-            <udate :date="data.created_at * 1000" to="ago" />
+          <span class="created" v-if="gptTimestamp">
+            <udate :date="Number(gptTimestamp) * 1000" to="ago" />
           </span>
         </div>
       </div>
       <div class="gpt-content">
         <div class="markdown">
-          <markdown :html="htmlContent" :sanitize="true" :compact="true" />
+          <markdown :markdown="props.gptResponse" :sanitize="true" :compact="true" />
         </div>
       </div>
     </div>

src/pages/article/index.vue

@@ -4,7 +4,6 @@
   import { useEnhancer } from '/@/app/enhancer'
   import { useUniversalFetch } from '/@/universal'
   import { useStores } from '/@/stores'
-  import { useChatGPTStore } from '/@/stores/chatgpt'
   import * as ANCHORS from '/@/constants/anchor'
   import { GAEventCategories } from '/@/constants/gtag'
   import { LanguageKey } from '/@/language'
@@ -31,12 +30,13 @@
   const { identity, sponsor, comment: commentStore, articleDetail: articleDetailStore } = useStores()
   const { article, fetching, prevArticle, nextArticle, relatedArticles } = storeToRefs(articleDetailStore)
   const isLiked = computed(() => Boolean(article.value && identity.isLikedPage(article.value.id)))
+  const articleExtends = computed(() => article.value?.extends || [])
 
   // fot ChatGPT
-  const chatgptStore = useChatGPTStore()
-  const articleChatGPTShareId = computed(() => {
-    return getExtendValue(article.value?.extends || [], 'chatgpt-share-id')
-  })
+  const articleGPTId = computed(() => getExtendValue(articleExtends.value, 'chatgpt-conversation-id'))
+  const articleGPTResponse = computed(() => getExtendValue(articleExtends.value, 'chatgpt-conversation-response'))
+  const articleGPTTimestamp = computed(() => getExtendValue(articleExtends.value, 'chatgpt-conversation-timestamp'))
+  const articleGPTModel = computed(() => getExtendValue(articleExtends.value, 'chatgpt-conversation-model'))
 
   const handleCommentTopBarChatGPTClick = () => {
     gtag?.event('chatgpt_comemnt_top_bar', {
@@ -79,13 +79,7 @@
 
   const fetchArticleDetail = (articleId: number) => {
     const commentRequest = commentStore.fetchList({ post_id: articleId })
-    const articleRequest = articleDetailStore.fetchCompleteArticle(articleId).then(() => {
-      if (articleChatGPTShareId.value) {
-        return chatgptStore.fetch(articleChatGPTShareId.value).catch((error) => {
-          console.warn('[Article] fetch chatgpt error', error?.message ?? error)
-        })
-      }
-    })
+    const articleRequest = articleDetailStore.fetchCompleteArticle(articleId)
     return Promise.all([articleRequest, commentRequest])
   }
 
@@ -177,19 +171,21 @@
     </placeholder>
     <div class="comment">
       <comment :plain="isMobile" :fetching="fetching" :post-id="articleId">
-        <template #topbar-extra v-if="articleChatGPTShareId">
+        <template #topbar-extra v-if="articleGPTId">
           <ulink
             class="chat-gpt-link"
-            :href="getChatGPTShareURL(articleChatGPTShareId)"
+            :href="getChatGPTShareURL(articleGPTId)"
             @click="handleCommentTopBarChatGPTClick"
           >
             <i class="iconfont icon-chat-gpt"></i>
           </ulink>
         </template>
-        <template #list-top-extra v-if="articleChatGPTShareId && chatgptStore.data">
+        <template #list-top-extra v-if="articleGPTId && articleGPTResponse">
           <article-chatgpt
-            :share-id="articleChatGPTShareId"
-            :data="chatgptStore.data"
+            :gpt-id="articleGPTId"
+            :gpt-response="articleGPTResponse"
+            :gpt-timestamp="articleGPTTimestamp"
+            :gpt-model="articleGPTModel"
             :hidden-avatar="isMobile"
             @click-link="handleCommentUsernameChatGPTClick"
           />

src/transforms/chatgpt.ts

@@ -4,6 +4,6 @@
  */
 
 // https://help.openai.com/en/articles/7925741-chatgpt-shared-links-faq#h_1ed51a9a7d
-export const getChatGPTShareURL = (shareId: string) => {
-  return `https://chat.openai.com/share/${shareId}`
+export const getChatGPTShareURL = (conversationId: string) => {
+  return `https://chat.openai.com/share/${conversationId}`
 }