feat: message sink haptic feedback

src/components/chat/InputBar.tsx

@@ -1,3 +1,4 @@
+import { hapticSoft } from '../../haptic'
 import { colors } from '../../res/colors'
 import { dimensions } from '../../res/dimensions'
 import { useThemeScheme, useThemeSelector } from '../../themes/hooks'
@@ -16,6 +17,8 @@ import Animated, {
 } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
+const H_EDGE = 8
+
 export interface InputBarProps {
   value: string
   sendDisabled: boolean
@@ -24,16 +27,14 @@ export interface InputBarProps {
   onSendPress: () => void
 }
 
-const H_EDGE = 8
-
 export function InputBar(props: InputBarProps): JSX.Element {
   const { value, sendDisabled, renderToolsBar, onChangeText, onSendPress } = props
 
+  const { t } = useTranslation()
   const tintColor = useThemeSelector(colors.white, colors.black)
   const textColor = useThemeSelector(colors.white, colors.black)
   const backgroundColor = useThemeSelector(colors.c1C, colors.cF7)
   const backgroundColor2 = useThemeSelector(colors.c28, colors.white)
-
   const { placeholder: placeholderColor } = useThemeScheme()
 
   const { bottom } = useSafeAreaInsets()
@@ -45,9 +46,6 @@ export function InputBar(props: InputBarProps): JSX.Element {
     }),
     []
   )
-
-  const { t } = useTranslation()
-
   const sendAnim = useSharedValue(0)
   const sendAnimStyle = useAnimatedStyle(() => {
     return {
@@ -91,7 +89,10 @@ export function InputBar(props: InputBarProps): JSX.Element {
               right: dimensions.edge,
               bottom: H_EDGE,
             }}
-            onPress={onSendPress}>
+            onPress={() => {
+              hapticSoft()
+              onSendPress()
+            }}>
             <SvgIcon size={dimensions.iconLarge} color={tintColor} name="send" />
           </Pressable>
         </Animated.View>

src/components/chat/InputToolsBar.tsx

@@ -1,3 +1,4 @@
+import { hapticSoft } from '../../haptic'
 import { dimensions } from '../../res/dimensions'
 import { useThemeScheme } from '../../themes/hooks'
 import { SvgIcon } from '../SvgIcon'
@@ -30,7 +31,10 @@ export function InputToolsBar(props: InputToolsBarProps): JSX.Element {
         containerSize={36}
         name="chat-new"
         disabled={newDialogueDisabled}
-        onPress={onNewDialoguePress}
+        onPress={() => {
+          hapticSoft()
+          onNewDialoguePress()
+        }}
       />
       <SvgIcon
         style={{ marginLeft: 4, marginBottom: 1 }}

src/components/chat/SSEMessageView.tsx

@@ -1,6 +1,7 @@
 import { dimensions } from '../../res/dimensions'
 import { images } from '../../res/images'
 import { stylez } from '../../res/stylez'
+import { texts } from '../../res/texts'
 import { TText } from '../../themes/TText'
 import { useThemeScheme } from '../../themes/hooks'
 import { trimContent } from '../../utils'
@@ -39,7 +40,7 @@ export function SSEMessageView(props: SSEMessageProps) {
         <TText
           style={[styles.text, stylez.contentText, { fontSize, lineHeight: fontSize * 1.2 }]}
           typo="text">
-          {content ? trimContent(content) : '...'}
+          {`${trimContent(content)}${texts.assistantCursor}`}
         </TText>
       </View>
     </View>

src/haptic/hooks.ts

@@ -0,0 +1,14 @@
+import { hapticSoft } from '.'
+import { useMessageSinkHapticFeedbackPref } from '../preferences/storages'
+import { useCallback } from 'react'
+
+export function useHapticFeedbackMessaging() {
+  const [isHaptic] = useMessageSinkHapticFeedbackPref()
+  const onNextHaptic = useCallback(() => {
+    if (!isHaptic) {
+      return
+    }
+    hapticSoft()
+  }, [isHaptic])
+  return { isHaptic, onNextHaptic }
+}

src/i18n/en/translation.json

@@ -120,5 +120,6 @@
   "Copy to Clipboard": "Copy to Clipboard",
   "No valid messages": "No valid messages",
   "CreateFirstChatTip": "There is no chat yet,\nclick to create one.",
-  "Chat Configs": "Chat Configs"
+  "Chat Configs": "Chat Configs",
+  "Message Sink Haptic Feedback": "Message Sink Haptic Feedback"
 }

src/i18n/zh-Hans/translation.json

@@ -120,5 +120,6 @@
   "Copy to Clipboard": "复制到粘贴板",
   "No valid messages": "无有效消息",
   "CreateFirstChatTip": "还没有对话，\n点击创建一个",
-  "Chat Configs": "对话配置"
+  "Chat Configs": "对话配置",
+  "Message Sink Haptic Feedback": "消息接收震动反馈"
 }

src/mmkv/keys.ts

@@ -12,6 +12,7 @@ export const enum StorageKey {
   enableClipboardDetect = 'enable_clipboard_detect',
   showChatAvatar = 'show_chat_avatar',
   colouredContextMessage = 'coloured_context_message',
+  messageSinkHapticFeedback = 'message_sink_haptic_feedback',
 
   // others
   lastDetectedText = 'last_detected_text',

src/preferences/defaults.ts

@@ -21,6 +21,7 @@ export const DEFAULTS: {
   enableClipboardDetect: boolean
   showChatAvatar: boolean
   colouredContextMessage: boolean
+  messageSinkHapticFeedback: boolean
   avatar: string
   contextMessagesNum: number
   fontSize: number
@@ -38,6 +39,7 @@ export const DEFAULTS: {
   enableClipboardDetect: true,
   showChatAvatar: true,
   colouredContextMessage: true,
+  messageSinkHapticFeedback: true,
   avatar: '😀',
   contextMessagesNum: 4,
   fontSize: 16,

src/preferences/storages.ts

@@ -96,3 +96,7 @@ export function useShowChatAvatarPref() {
 export function useColouredContextMessagePref() {
   return useStorageBoolean(StorageKey.colouredContextMessage, DEFAULTS.colouredContextMessage)
 }
+
+export function useMessageSinkHapticFeedbackPref() {
+  return useStorageBoolean(StorageKey.messageSinkHapticFeedback, DEFAULTS.messageSinkHapticFeedback)
+}

src/res/texts.ts

@@ -4,4 +4,6 @@ export const texts = {
   requestError: 'Request error',
   requestTimeout: 'Request timeout',
   checkNetworkOrSettings: 'Please check if your network or settings are valid',
+  userCursor: '○',
+  assistantCursor: '●',
 }

src/screens/custom-chat/index.tsx

@@ -13,6 +13,7 @@ import {
   useInfiniteQueryCustomChatMessagePageable,
 } from '../../db/table/t-custom-chat-message'
 import { hapticError, hapticSuccess, hapticWarning } from '../../haptic'
+import { useHapticFeedbackMessaging } from '../../haptic/hooks'
 import { useOpenAIApiCustomizedOptions, useOpenAIApiUrlOptions } from '../../http/apis/hooks'
 import {
   ChatCompletionsCustomizedOptions,
@@ -53,13 +54,17 @@ export function CustomChatScreen({ navigation, route }: Props): JSX.Element {
   const { chat } = route.params
   const { id } = chat
 
+  const { t } = useTranslation()
+  const { backgroundChat: backgroundColor } = useThemeScheme()
+
+  const [showChatAvatar] = useShowChatAvatarPref()
+  const [colouredContextMessage] = useColouredContextMessagePref()
+
   const settingsModalRef = useRef<SettingsSelectorModalHandle>(null)
   const settings = fillTCustomChatWithDefaults(id, useCustomChatSettings(id))
   const { chat_name, system_prompt, model, temperature, avatar, font_size, context_messages_num } =
     settings
 
-  const { t } = useTranslation()
-
   const [freshMessages, setFreshMessages] = useState<BaseMessage[]>([])
   const legacyPageSize = context_messages_num > 20 ? 100 : 20
   const legacyResult = useInfiniteQueryCustomChatMessagePageable(id, legacyPageSize)
@@ -110,18 +115,6 @@ export function CustomChatScreen({ navigation, route }: Props): JSX.Element {
     }
     return count
   }, [finalMessages])
-
-  const { urlOptions, checkIsOptionsValid } = useOpenAIApiUrlOptions()
-  const customizedOptions: ChatCompletionsCustomizedOptions = {
-    ...useOpenAIApiCustomizedOptions(),
-    model,
-    temperature,
-  }
-
-  const { backgroundChat: backgroundColor } = useThemeScheme()
-  const [showChatAvatar] = useShowChatAvatarPref()
-  const [colouredContextMessage] = useColouredContextMessagePref()
-
   const { height: keyboardHeight } = useReanimatedKeyboardAnimation()
   const enablekeyboardAvoid = useSharedValue(true)
   const transformStyle = useAnimatedStyle(() => {
@@ -140,6 +133,14 @@ export function CustomChatScreen({ navigation, route }: Props): JSX.Element {
 
   const [inputText, setInputText] = useState('')
 
+  const { onNextHaptic } = useHapticFeedbackMessaging()
+  const { urlOptions, checkIsOptionsValid } = useOpenAIApiUrlOptions()
+  const customizedOptions: ChatCompletionsCustomizedOptions = {
+    ...useOpenAIApiCustomizedOptions(),
+    model,
+    temperature,
+  }
+
   const status = useSSEMessageStore(state => state.status)
   const sendDisabled = inputText.trim() && status !== 'sending' ? false : true
   const setStatus = useSSEMessageStore(state => state.setStatus)
@@ -178,6 +179,7 @@ export function CustomChatScreen({ navigation, route }: Props): JSX.Element {
     esRef.current = sseRequestChatCompletions(urlOptions, customizedOptions, messages, {
       onNext: content => {
         setContent(content)
+        onNextHaptic()
         scrollToTop(0)
       },
       onError: (code, message) => {

src/screens/main/modes/ModeScene.tsx

@@ -8,6 +8,7 @@ import {
   useQueryFindModeResultWhere,
 } from '../../../db/table/t-mode-result'
 import { hapticError, hapticSoft, hapticSuccess } from '../../../haptic'
+import { useHapticFeedbackMessaging } from '../../../haptic/hooks'
 import { useRefetchFocusEffect } from '../../../hooks'
 import { useOpenAIApiCustomizedOptions, useOpenAIApiUrlOptions } from '../../../http/apis/hooks'
 import { sseRequestChatCompletions } from '../../../http/apis/v1/chat/completions'
@@ -49,15 +50,9 @@ export type ModeSceneHandle = {
 
 export const ModeScene = React.forwardRef<ModeSceneHandle, ModeSceneProps>((props, ref) => {
   const { style, focused, targetLang, translatorMode } = props
-
-  const ttsModalRef = useRef<TTSModalHandle>(null)
-
   const { t } = useTranslation()
   const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>()
-
-  const { urlOptions, checkIsOptionsValid } = useOpenAIApiUrlOptions()
-  const customizedOptions = useOpenAIApiCustomizedOptions()
-  const [status, setStatus] = useState<TranslatorStatus>('none')
+  const ttsModalRef = useRef<TTSModalHandle>(null)
 
   // input
   const inputViewRef = useRef<InputViewHandle>(null)
@@ -137,6 +132,11 @@ export const ModeScene = React.forwardRef<ModeSceneHandle, ModeSceneProps>((prop
     })
   }
 
+  const { onNextHaptic } = useHapticFeedbackMessaging()
+  const { urlOptions, checkIsOptionsValid } = useOpenAIApiUrlOptions()
+  const customizedOptions = useOpenAIApiCustomizedOptions()
+  const [status, setStatus] = useState<TranslatorStatus>('none')
+
   const eventSourceRef = useRef<EventSource | null>(null)
   const perfromChatCompletions = (messages: ApiMessage[]) => {
     if (!checkIsOptionsValid()) {
@@ -150,6 +150,7 @@ export const ModeScene = React.forwardRef<ModeSceneHandle, ModeSceneProps>((prop
     setStatus('pending')
     eventSourceRef.current = sseRequestChatCompletions(urlOptions, customizedOptions, messages, {
       onNext: content => {
+        onNextHaptic()
         outputViewRef.current?.updateText(content)
       },
       onError: (code, message) => {
@@ -263,7 +264,12 @@ export const ModeScene = React.forwardRef<ModeSceneHandle, ModeSceneProps>((prop
       <ScrollView
         style={{ flex: 1, marginTop: dimensions.edge }}
         contentContainerStyle={{ paddingBottom: dimensions.spaceBottom }}>
-        <OutputView ref={outputViewRef} assistantText={assistantText} text={outputText} />
+        <OutputView
+          ref={outputViewRef}
+          status={status}
+          assistantText={assistantText}
+          outputText={outputText}
+        />
         <View style={styles.toolsRow}>
           <ModeSceneResultButton
             mode={translatorMode}

src/screens/main/modes/OutputView.tsx

@@ -1,29 +1,32 @@
 import { dimensions } from '../../../res/dimensions'
 import { stylez } from '../../../res/stylez'
+import { texts } from '../../../res/texts'
 import { useThemeScheme } from '../../../themes/hooks'
+import { TranslatorStatus } from '../../../types'
 import React, { useImperativeHandle, useState } from 'react'
 import { StyleProp, StyleSheet, Text, TextStyle } from 'react-native'
 
 export interface OutputViewProps {
   style?: StyleProp<TextStyle>
+  status: TranslatorStatus
   assistantText: string | null
-  text: string
+  outputText: string
 }
 
 export interface OutputViewHandle {
   updateText: (text: string) => void
 }
 
 export const OutputView = React.forwardRef<OutputViewHandle, OutputViewProps>((props, ref) => {
-  const { style, assistantText, text } = props
+  const { style, status, assistantText, outputText } = props
   const { text: textColor, text3: text3Color } = useThemeScheme()
-  const color = text !== assistantText ? text3Color : textColor
+  const color = outputText !== assistantText ? text3Color : textColor
 
   const [displayText, setDisplayText] = useState('')
-  const [preText, setPreText] = useState(text)
-  if (text !== preText) {
-    setPreText(text)
-    setDisplayText(text)
+  const [preOutputText, setPreOutputText] = useState(outputText)
+  if (outputText !== preOutputText) {
+    setPreOutputText(outputText)
+    setDisplayText(outputText)
   }
 
   useImperativeHandle(ref, () => ({
@@ -32,7 +35,7 @@ export const OutputView = React.forwardRef<OutputViewHandle, OutputViewProps>((p
 
   return (
     <Text selectable style={[stylez.contentText, styles.text, { color }, style]}>
-      {displayText}
+      {`${displayText}${status === 'pending' ? texts.assistantCursor : ''}`}
     </Text>
   )
 })

src/screens/mode-chat/index.tsx

@@ -12,6 +12,7 @@ import {
   useQueryModeChatMessageOfResultId,
 } from '../../db/table/t-mode-chat-message'
 import { hapticError, hapticSuccess, hapticWarning } from '../../haptic'
+import { useHapticFeedbackMessaging } from '../../haptic/hooks'
 import { useOpenAIApiCustomizedOptions, useOpenAIApiUrlOptions } from '../../http/apis/hooks'
 import { sseRequestChatCompletions } from '../../http/apis/v1/chat/completions'
 import { DEFAULTS } from '../../preferences/defaults'
@@ -77,16 +78,14 @@ export function ModeChatScreen({ navigation, route }: Props): JSX.Element {
   const assistantIconName = getAssistantIconName(translatorMode)
 
   const { t } = useTranslation()
-  const [clearMessagesModalVisible, setClearMessagesModalVisible] = useState(false)
-  const fontSize = DEFAULTS.fontSize
-
-  const { urlOptions, checkIsOptionsValid } = useOpenAIApiUrlOptions()
-  const customizedOptions = useOpenAIApiCustomizedOptions()
-
   const { backgroundChat: backgroundColor } = useThemeScheme()
+
   const [showChatAvatar] = useShowChatAvatarPref()
   const [colouredContextMessage] = useColouredContextMessagePref()
 
+  const [clearMessagesModalVisible, setClearMessagesModalVisible] = useState(false)
+  const fontSize = DEFAULTS.fontSize
+
   const { height: keyboardHeight } = useReanimatedKeyboardAnimation()
   const transformStyle = useAnimatedStyle(() => {
     return { transform: [{ translateY: keyboardHeight.value }] }
@@ -154,6 +153,10 @@ export function ModeChatScreen({ navigation, route }: Props): JSX.Element {
 
   const [inputText, setInputText] = useState('')
 
+  const { onNextHaptic } = useHapticFeedbackMessaging()
+  const { urlOptions, checkIsOptionsValid } = useOpenAIApiUrlOptions()
+  const customizedOptions = useOpenAIApiCustomizedOptions()
+
   const status = useSSEMessageStore(state => state.status)
   const sendDisabled = inputText.trim() && status !== 'sending' ? false : true
   const setStatus = useSSEMessageStore(state => state.setStatus)
@@ -192,6 +195,7 @@ export function ModeChatScreen({ navigation, route }: Props): JSX.Element {
     esRef.current = sseRequestChatCompletions(urlOptions, customizedOptions, messages, {
       onNext: content => {
         setContent(content)
+        onNextHaptic()
         scrollToTop(0)
       },
       onError: (code, message) => {