Merge pull request #4949 from traPtitech/feat/stamp-recommendation

reiroop · web-flow · commit daafa23da77b · 2025-11-30T20:50:10.000+09:00
feat(stamp): スタンプのレコメンド機能を追加
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "@mdi/js": "^7.4.47",
     "@sapphi-red/web-noise-suppressor": "^0.3.5",
     "@shiguredo/virtual-background": "^2023.2.0",
-    "@traptitech/traq": "^3.25.1-5",
+    "@traptitech/traq": "^3.26.1-1",
     "@traptitech/traq-markdown-it": "^7.0.2",
     "autosize": "^6.0.1",
     "browser-image-compression": "^2.0.2",
diff --git a/src/components/Main/MainView/MessageElement/MessageTools.vue b/src/components/Main/MainView/MessageElement/MessageTools.vue
@@ -8,7 +8,7 @@
     <transition v-if="!isMinimum" name="quick-reaction">
       <div v-if="showQuickReaction || !isMobile" :class="$style.quickReaction">
         <AStamp
-          v-for="stamp in recentStamps"
+          v-for="stamp in topStamps"
           :key="stamp"
           :stamp-id="stamp"
           :size="28"
@@ -96,7 +96,7 @@ import useToggle from '/@/composables/utils/useToggle'
 import { isDefined } from '/@/lib/basic/array'
 import { useStampUpdater } from '/@/lib/updater/stamp'
 import { useMeStore } from '/@/store/domain/me'
-import { useStampHistory } from '/@/store/domain/stampHistory'
+import { useTopStampIds } from '/@/store/domain/stampRecommendations'
 import { useMessagesStore } from '/@/store/entities/messages'
 import { useStampsStore } from '/@/store/entities/stamps'
 import { useMessageEditingStateStore } from '/@/store/ui/messageEditingStateStore'
@@ -120,7 +120,7 @@ const props = withDefaults(
 
 const isActive = defineModel<boolean>('isActive', { default: false })
 
-const { recentStampIds } = useStampHistory()
+const { topStampIds } = useTopStampIds()
 const { addStampOptimistically } = useStampUpdater()
 const { initialRecentStamps } = useStampsStore()
 
@@ -139,10 +139,10 @@ const pushInitialRecentStampsIfNeeded = (
   }
 }
 
-const recentStamps = computed(() => {
-  const recents = recentStampIds.value.slice(0, 3)
-  pushInitialRecentStampsIfNeeded(initialRecentStamps.value, recents)
-  return recents
+const topStamps = computed(() => {
+  const tops = topStampIds.value.slice(0, 3)
+  pushInitialRecentStampsIfNeeded(initialRecentStamps.value, tops)
+  return tops
 })
 const addStamp = async (stampId: StampId) =>
   addStampOptimistically(props.messageId, stampId)
diff --git a/src/components/Main/MainView/MessageInput/composables/suggestion/overrides/stampSuggestion.ts b/src/components/Main/MainView/MessageInput/composables/suggestion/overrides/stampSuggestion.ts
@@ -1,6 +1,7 @@
 import { type MaybeRefOrGetter, computed, toValue } from 'vue'
 
 import { useStampHistory } from '/@/store/domain/stampHistory'
+import { useStampRecommendations } from '/@/store/domain/stampRecommendations'
 
 import type {
   Candidate,
@@ -19,6 +20,7 @@ const stampSuggestionOverride = <
   input: Params
 ) => {
   const { upsertLocalStampHistory } = useStampHistory()
+  const { recordStampUsage } = useStampRecommendations()
 
   const isStampSuggestion = computed(() =>
     toValue(input.confirmedPart).text.startsWith(':')
@@ -35,6 +37,7 @@ const stampSuggestionOverride = <
 
   const onSelect = (word: WordWithId) => {
     upsertLocalStampHistory(word.id, new Date())
+    recordStampUsage(word.id)
     input.onSelect({ ...word, text: `${word.text}:` })
   }
 
diff --git a/src/components/Main/StampPicker/StampPicker.vue b/src/components/Main/StampPicker/StampPicker.vue
@@ -53,6 +53,7 @@ import { onMounted, ref } from 'vue'
 import ClickOutside from '/@/components/UI/ClickOutside'
 import FilterInput from '/@/components/UI/FilterInput.vue'
 import { useStampHistory } from '/@/store/domain/stampHistory'
+import { useStampRecommendations } from '/@/store/domain/stampRecommendations'
 import { useResponsiveStore } from '/@/store/ui/responsive'
 import { useStampPicker } from '/@/store/ui/stampPicker'
 import type { StampId } from '/@/types/entity-ids'
@@ -75,6 +76,7 @@ const {
   closeStampPicker
 } = useStampPicker()
 const { upsertLocalStampHistory } = useStampHistory()
+const { recordStampUsage } = useStampRecommendations()
 const { isMobile } = useResponsiveStore()
 
 const animationKeys = ref(new Map<StampId, number>())
@@ -99,6 +101,7 @@ const filterInputRef = ref<InstanceType<typeof FilterInput> | null>(null)
 
 const onInputStamp = (id: StampId) => {
   upsertLocalStampHistory(id, new Date())
+  recordStampUsage(id)
   selectHandler.value({
     id,
     sizeEffect: selectedSizeEffect.value,
diff --git a/src/components/Main/StampPicker/composables/useStampList.ts b/src/components/Main/StampPicker/composables/useStampList.ts
@@ -2,7 +2,7 @@ import type { Ref } from 'vue'
 import { computed } from 'vue'
 
 import { useStampCategory } from '/@/store/domain/stampCategory'
-import { useStampHistory } from '/@/store/domain/stampHistory'
+import { useTopStampIds } from '/@/store/domain/stampRecommendations'
 import { useStampPalettesStore } from '/@/store/entities/stampPalettes'
 import { useStampsStore } from '/@/store/entities/stamps'
 import type { StampId } from '/@/types/entity-ids'
@@ -12,13 +12,13 @@ import type { StampSet } from './useStampSetSelector'
 
 const useStampList = (currentStampSet: Ref<StampSet>) => {
   const { traQStampCategory, unicodeStampCategories } = useStampCategory()
-  const { recentStampIds } = useStampHistory()
+  const { topStampIds } = useTopStampIds()
   const { stampsMap } = useStampsStore()
   const { stampPalettesMap } = useStampPalettesStore()
 
   const stampIds = computed((): readonly StampId[] => {
     if (currentStampSet.value.type === 'history') {
-      return recentStampIds.value
+      return topStampIds.value
     }
     if (currentStampSet.value.type === 'palette') {
       const id = currentStampSet.value.id
diff --git a/src/components/Settings/StampPaletteTab/StampPaletteEditorAddableStampList.vue b/src/components/Settings/StampPaletteTab/StampPaletteEditorAddableStampList.vue
@@ -46,6 +46,10 @@ import { computed, onUnmounted, ref, watch } from 'vue'
 import useStampFilter from '/@/components/Main/StampPicker/composables/useStampFilter'
 import FilterInput from '/@/components/UI/FilterInput.vue'
 import { useStampHistory } from '/@/store/domain/stampHistory'
+import {
+  useStampRecommendations,
+  useTopStampIds
+} from '/@/store/domain/stampRecommendations'
 import { useStampsStore } from '/@/store/entities/stamps'
 import type { StampId } from '/@/types/entity-ids'
 
@@ -58,25 +62,27 @@ const currentStampIds = defineModel<StampId[]>('current-stamp-ids', {
 })
 
 const { stampsMap, stampsMapFetched } = useStampsStore()
-const { recentStampIds, fetchStampHistory } = useStampHistory()
+const { fetchStampHistory } = useStampHistory()
+const { fetchStampRecommendations } = useStampRecommendations()
+const { topStampIds } = useTopStampIds()
 const { filterState } = useStampFilter()
 
 const displayCount = ref(ITEMS_PER_LOAD)
 
 fetchStampHistory()
-
+fetchStampRecommendations()
 const allAddableStamps = computed(() => {
   if (!stampsMapFetched.value) {
     return []
   }
   return (
     filterState.query === ''
       ? [
-          ...recentStampIds.value
+          ...topStampIds.value
             .map(id => stampsMap.value.get(id))
             .filter(stamp => stamp !== undefined),
           ...filterState.filteredItems
-            .filter(stamp => !recentStampIds.value.includes(stamp.id))
+            .filter(stamp => !topStampIds.value.includes(stamp.id))
             .sort((a, b) => a.name.localeCompare(b.name))
         ]
       : filterState.filteredItems
diff --git a/src/components/ShareTarget/ShareTargetMessageInput.vue b/src/components/ShareTarget/ShareTargetMessageInput.vue
@@ -44,6 +44,7 @@ import useMessageInputState from '/@/composables/messageInputState/useMessageInp
 import useMessageInputStateAttachment from '/@/composables/messageInputState/useMessageInputStateAttachment'
 import { randomString } from '/@/lib/basic/randomString'
 import { useStampHistory } from '/@/store/domain/stampHistory'
+import { useStampRecommendations } from '/@/store/domain/stampRecommendations'
 import { useStampPalettesStore } from '/@/store/entities/stampPalettes'
 import { useStampsStore } from '/@/store/entities/stamps'
 import { useToastStore } from '/@/store/ui/toast'
@@ -52,6 +53,7 @@ import useAttachments from '../Main/MainView/MessageInput/composables/useAttachm
 import useTextStampPickerInvoker from '../Main/MainView/composables/useTextStampPickerInvoker'
 
 const { fetchStampHistory } = useStampHistory()
+const { fetchStampRecommendations } = useStampRecommendations()
 const { fetchStamps } = useStampsStore()
 const { fetchStampPalettes } = useStampPalettesStore()
 const { state } = useMessageInputState('share-target')
@@ -81,6 +83,7 @@ const { toggleStampPicker } = useTextStampPickerInvoker(
 fetchStamps()
 fetchStampPalettes()
 fetchStampHistory()
+fetchStampRecommendations()
 
 const id = randomString()
 </script>
diff --git a/src/lib/updater/stamp.ts b/src/lib/updater/stamp.ts
@@ -1,12 +1,14 @@
 import apis from '/@/lib/apis'
 import { useStampHistory } from '/@/store/domain/stampHistory'
+import { useStampRecommendations } from '/@/store/domain/stampRecommendations'
 import { useMessagesStore } from '/@/store/entities/messages'
 import { useToastStore } from '/@/store/ui/toast'
 import type { MessageId, StampId } from '/@/types/entity-ids'
 
 export const useStampUpdater = () => {
   const { addErrorToast } = useToastStore()
   const { upsertLocalStampHistory } = useStampHistory()
+  const { recordStampUsage } = useStampRecommendations()
   const { addStampLocally, removeStampLocally } = useMessagesStore()
 
   const addStampOptimistically = async (
@@ -15,6 +17,7 @@ export const useStampUpdater = () => {
   ) => {
     const cancel = addStampLocally(messageId, stampId)
     upsertLocalStampHistory(stampId, new Date())
+    recordStampUsage(stampId)
     try {
       await apis.addMessageStamp(messageId, stampId)
     } catch {
diff --git a/src/store/app/featureFlagSettings.ts b/src/store/app/featureFlagSettings.ts
@@ -43,6 +43,13 @@ export const featureFlagDescriptions = {
       'お気に入りチャンネル一覧を、お気に入りに登録されたチャンネルのみの木構造で表示します。',
     defaultValue: false,
     endAt: new Date('2025-12-31T23:59')
+  },
+  stamp_recommendation: {
+    title: 'スタンプのレコメンド機能',
+    description:
+      'スタンプのレコメンド機能を有効にします。スタンプ履歴が用いられている部分をレコメンドで置き換えます。',
+    defaultValue: false,
+    endAt: new Date('2026-01-31T23:59')
   }
 } as const satisfies Record<string, FeatureFlagDescription>
 
diff --git a/src/store/domain/stampRecommendations.ts b/src/store/domain/stampRecommendations.ts
@@ -0,0 +1,90 @@
+import { computed, ref } from 'vue'
+
+import { acceptHMRUpdate, defineStore } from 'pinia'
+
+import apis from '/@/lib/apis'
+import { useFeatureFlagSettings } from '/@/store/app/featureFlagSettings'
+import { useStampHistory } from '/@/store/domain/stampHistory'
+import { useStampsStore } from '/@/store/entities/stamps'
+import { convertToRefsStore } from '/@/store/utils/convertToRefsStore'
+import type { StampId } from '/@/types/entity-ids'
+
+const useStampRecommendationsPinia = defineStore(
+  'domain/stampRecommendations',
+  () => {
+    const stampsStore = useStampsStore()
+
+    const stampToRecommendationScore = ref(new Map<StampId, number>())
+    const stampRecommendationsFetched = ref(false)
+
+    const stampRecommendations = computed(() =>
+      [...stampToRecommendationScore.value.keys()]
+        .filter(stampId => stampsStore.stampsMap.value.has(stampId))
+        .sort((stampId1, stampId2) => {
+          const score1 = stampToRecommendationScore.value.get(stampId1) ?? 0
+          const score2 = stampToRecommendationScore.value.get(stampId2) ?? 0
+          return score2 - score1
+        })
+    )
+
+    const recentlyRecorded = new Set<StampId>()
+    const recordStampUsage = (stampId: StampId) => {
+      if (recentlyRecorded.has(stampId)) return
+      recentlyRecorded.add(stampId)
+      setTimeout(() => {
+        recentlyRecorded.delete(stampId)
+      }, 50)
+
+      // このスコア更新はバックエンドでのスコア計算アルゴリズムの簡易的な模倣です。
+      // バックエンドのアルゴリズムが変更された場合はここも合わせて変更する必要があります。
+      // 正確なスコアは fetchStampRecommendations() で同期されます。
+      stampToRecommendationScore.value.set(
+        stampId,
+        (stampToRecommendationScore.value.get(stampId) || 0) + 1
+      )
+    }
+
+    const fetchStampRecommendations = async ({
+      ignoreCache = false
+    }: { ignoreCache?: boolean } = {}) => {
+      if (!ignoreCache && stampRecommendationsFetched.value) return
+
+      await apis.getMyStampRecommendations().then(res => {
+        stampToRecommendationScore.value = new Map(
+          res.data.map(h => [h.stampId, h.score])
+        )
+      })
+      stampRecommendationsFetched.value = true
+    }
+
+    return {
+      stampRecommendations,
+      recordStampUsage,
+      fetchStampRecommendations
+    }
+  }
+)
+
+export const useStampRecommendations = convertToRefsStore(
+  useStampRecommendationsPinia
+)
+
+export const useTopStampIds = () => {
+  const { featureFlags } = useFeatureFlagSettings()
+  const { stampRecommendations } = useStampRecommendations()
+  const { recentStampIds } = useStampHistory()
+
+  const topStampIds = computed(() =>
+    featureFlags.value.stamp_recommendation.enabled
+      ? stampRecommendations.value
+      : recentStampIds.value
+  )
+
+  return { topStampIds }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(
+    acceptHMRUpdate(useStampRecommendationsPinia, import.meta.hot)
+  )
+}
diff --git a/src/views/composables/useInitialFetch.ts b/src/views/composables/useInitialFetch.ts
@@ -2,6 +2,7 @@ import { ref } from 'vue'
 
 import { useRoomsStore } from '/@/store/domain/rooms'
 import { useStampHistory } from '/@/store/domain/stampHistory'
+import { useStampRecommendations } from '/@/store/domain/stampRecommendations'
 import { useStaredChannels } from '/@/store/domain/staredChannels'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
 import { useViewStatesStore } from '/@/store/domain/viewStates'
@@ -24,6 +25,7 @@ const useInitialFetch_ = () => {
   const { fetchUnreadChannels, fetchSubscriptions } = useSubscriptionStore()
   const { fetchViewStates } = useViewStatesStore()
   const { fetchStampHistory } = useStampHistory()
+  const { fetchStampRecommendations } = useStampRecommendations()
   const { fetchStaredChannels } = useStaredChannels()
   const { fetchRooms } = useRoomsStore()
 
@@ -39,6 +41,7 @@ const useInitialFetch_ = () => {
     fetchViewStates()
 
     fetchStampHistory()
+    fetchStampRecommendations()
     fetchStampPalettes()
 
     fetchStaredChannels()
