[Chat refactor] Bubble의 default click 설정

packages/chat/package.json

@@ -43,6 +43,8 @@
     "@titicaca/color-palette": "workspace:*",
     "@titicaca/core-elements": "workspace:*",
     "@titicaca/intersection-observer": "workspace:*",
+    "@titicaca/react-triple-client-interfaces": "workspace:*",
+    "@titicaca/router": "workspace:*",
     "@titicaca/triple-fallback-action": "workspace:*",
     "@titicaca/triple-web-to-native-interfaces": "1.9.0",
     "@titicaca/type-definitions": "workspace:*",
@@ -53,6 +55,8 @@
   },
   "devDependencies": {
     "@titicaca/react-contexts": "workspace:*",
+    "@titicaca/i18n": "workspace:*",
+    "@titicaca/next-i18next": "13.8.5",
     "@types/isomorphic-fetch": "^0.0.38",
     "react": "^18.2.0",
     "styled-components": "^5.3.11"

packages/chat/src/bubble/bubble-ui.tsx

@@ -70,6 +70,7 @@ export type BubbleUIProps = (
   maxWidthOffset?: BubbleProp['maxWidthOffset']
   cloudinaryName?: string
   mediaUrlBase?: string
+  appUrlScheme?: string
   hasArrow?: boolean
   css?: CSSProp
 }
@@ -92,6 +93,7 @@ export default function BubbleUI({
   maxWidthOffset,
   cloudinaryName,
   mediaUrlBase,
+  appUrlScheme,
   hasArrow,
   css,
 }: BubbleUIProps) {
@@ -130,6 +132,7 @@ export default function BubbleUI({
       return (
         <ImageBubble
           images={value.images}
+          appUrlScheme={appUrlScheme}
           onClick={onImageBubbleClick}
           onLongPress={onImageBubbleLongPress}
           css={css}
@@ -171,8 +174,6 @@ export default function BubbleUI({
           css={css}
         />
       )
-    //   case MessageType.DELETED:
-    //     return <DeletedBubble />
     default:
       throw new Error('지원하지 않는 메시지 타입입니다.')
   }

packages/chat/src/bubble/image.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import { useLongPress } from 'use-long-press'
 
 import { MetaDataInterface } from '../types'
+import { navigateToImage } from '../utils'
 
 import { ImageItem } from './item'
 import { ImageBubbleProp } from './type'
@@ -17,7 +18,12 @@ const ImageRow = styled.div`
 
 const MAX_IMAGE_WIDTH = 247
 
-export function ImageBubble({ images, onClick, onLongPress }: ImageBubbleProp) {
+export function ImageBubble({
+  images,
+  appUrlScheme,
+  onClick,
+  onLongPress,
+}: ImageBubbleProp) {
   const allocatedImages = allocateImages(images)
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
@@ -44,7 +50,11 @@ export function ImageBubble({ images, onClick, onLongPress }: ImageBubbleProp) {
               key={image.id}
               src={image.sizes.large.url}
               onClick={(e) => {
-                onClick?.(e, images, image.index)
+                if (onClick) {
+                  onClick?.(e, images, image.index)
+                } else if (appUrlScheme) {
+                  navigateToImage({ appUrlScheme, images, index })
+                }
               }}
               css={
                 images.length === 2 || images.length === 4

packages/chat/src/bubble/text.tsx

@@ -1,3 +1,5 @@
+import useATagNavigator from '../utils/a-tag-navigator'
+
 import { TextItem } from './item'
 import { Bubble } from './bubble'
 import { TextBubbleProp } from './type'
@@ -40,9 +42,11 @@ function getDefaultBackgroundColor(my: boolean) {
  */
 
 export function TextBubble({ message, ...props }: TextBubbleProp) {
+  const aTagNavigator = useATagNavigator()
+
   return (
     <Bubble {...props}>
-      <TextItem text={message} />
+      <TextItem text={message} onClick={(e) => aTagNavigator(e)} />
     </Bubble>
   )
 }

packages/chat/src/bubble/type.ts

@@ -81,6 +81,7 @@ export type RichBubbleProp = {
 
 export interface ImageBubbleProp {
   images: MetaDataInterface[]
+  appUrlScheme?: string
   onClick?: (
     e: MouseEvent,
     images: MetaDataInterface[],

packages/chat/src/i18n.d.ts

@@ -0,0 +1,11 @@
+import '@titicaca/next-i18next'
+import { I18nCommonWebKeys } from '@titicaca/i18n'
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    defaultNS: 'common-web'
+    resources: {
+      'common-web': I18nCommonWebKeys
+    }
+  }
+}

packages/chat/src/messages.tsx

@@ -45,8 +45,8 @@ interface MessagesProp<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   customBubble?: { [key: string]: ComponentType<any> }
   me: UserInterface
-  onRetry?: () => void
-  onRetryCancel?: () => void
+  onRetry?: (message: MessageInterface<Message, User>) => void
+  onRetryCancel?: (message: MessageInterface<Message, User>) => void
 }
 
 export default function Messages<
@@ -140,10 +140,10 @@ export default function Messages<
           showInfo={type !== 'product'}
           {...(listType === 'failed' && {
             onRetry: () => {
-              onRetry?.()
+              onRetry?.(message)
             },
             onRetryCancel: () => {
-              onRetryCancel?.()
+              onRetryCancel?.(message)
             },
           })}
         >

packages/chat/src/utils/a-tag-navigator.ts

@@ -0,0 +1,34 @@
+import { MouseEvent } from 'react'
+import { useEnv } from '@titicaca/react-contexts'
+import { useExternalRouter, useHrefToProps } from '@titicaca/router'
+import { useTripleClientMetadata } from '@titicaca/react-triple-client-interfaces'
+
+export default function useATagNavigator() {
+  const routeExternally = useExternalRouter()
+  const { webUrlBase } = useEnv()
+  const convertHrefToProps = useHrefToProps()
+  const app = useTripleClientMetadata()
+
+  const aTagNavigator = (event: MouseEvent) => {
+    const eventTarget = event.target as HTMLElement
+
+    if (eventTarget.tagName === 'A') {
+      const originHref = eventTarget.getAttribute('href') ?? ''
+
+      const href =
+        originHref.includes(webUrlBase) && app
+          ? convertHrefToProps(originHref).href
+          : originHref
+
+      if (href) {
+        routeExternally({
+          href,
+          target: 'new',
+          noNavbar: true,
+        })
+      }
+    }
+  }
+
+  return aTagNavigator
+}

packages/chat/src/utils/image.ts

@@ -1,3 +1,7 @@
+import qs from 'querystring'
+
+import { generateUrl } from '@titicaca/view-utilities'
+
 import { UserInterface, MetaDataInterface } from '../types'
 
 export function getProfileImageUrl(user: UserInterface) {
@@ -37,3 +41,19 @@ export function generatePreviewImage({
     customWidth,
   )},q_auto,f_auto/${cloudinaryId}.jpeg`
 }
+
+export function navigateToImage({
+  appUrlScheme,
+  images,
+  index = 0,
+}: {
+  appUrlScheme: string
+  images: MetaDataInterface[]
+  index?: number
+}) {
+  window.location.href = generateUrl({
+    scheme: appUrlScheme,
+    path: '/images',
+    query: qs.stringify({ images: JSON.stringify(images), index }),
+  })
+}

packages/chat/src/utils/index.ts

@@ -1 +1,2 @@
 export * from './image'
+export { default as useATagNavigator } from './a-tag-navigator'