chore: 引入新markdown组件

2025-08-03 17:00:50 +08:00 · 2025-08-03 17:00:50 +08:00 · 061f4e07eb
commit 061f4e07eb
parent 4a30e7f43c
7 changed files with 289 additions and 43 deletions
--- a/components/ask/chat.tsx
+++ b/components/ask/chat.tsx
@ -1,6 +1,5 @@
-import { Message, Video } from '@/types/ask';
-import { MaterialItem } from '@/types/personal-info';
-import React, { Dispatch, ForwardedRef, forwardRef, memo, SetStateAction, useCallback, useMemo, useState } from 'react';
+import { ContentPart, Message } from '@/types/ask';
+import React, { Dispatch, ForwardedRef, forwardRef, SetStateAction, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
    FlatList,
@ -10,6 +9,8 @@ import {
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import MessageItem from '../chat/message-item/message-item';
+import SelectModel from "./selectModel";
+import SingleContentModel from "./singleContentModel";

 // 继承 FlatListProps 来接收所有 FlatList 的属性
 interface ChatProps extends Omit<FlatListProps<Message>, 'data' | 'renderItem'> {
@ -24,7 +25,7 @@ function ChatComponent(
    ref: ForwardedRef<FlatList<Message>>
 ) {
    const insets = useSafeAreaInsets();
-    const [modalVisible, setModalVisible] = React.useState({ visible: false, data: {} as Video | MaterialItem });
+    const [modalVisible, setModalVisible] = React.useState({ visible: false, data: {} as ContentPart });
    const { t } = useTranslation();
    const keyExtractor = useCallback((item: Message) => `${item.role}-${item.timestamp}`, []);
    // 取消展示右键菜单
@ -37,20 +38,35 @@ function ChatComponent(

    const [modalDetailsVisible, setModalDetailsVisible] = useState<{ visible: boolean, content: any }>({ visible: false, content: [] });

+    const renderMessageItem = useCallback(({ item, index }: { item: Message, index: number }) => {
+        const itemStyle = index === 0 ? { marginTop: 16, marginHorizontal: 16 } : { marginHorizontal: 16 };
+        return (
+            <View style={itemStyle}>
+                <MessageItem
+                    item={item}
+                    insets={insets}
+                    sessionId={sessionId}
+                    modalVisible={modalVisible}
+                    setModalVisible={setModalVisible}
+                    modalDetailsVisible={modalDetailsVisible}
+                    setModalDetailsVisible={setModalDetailsVisible}
+                    selectedImages={selectedImages}
+                    setSelectedImages={setSelectedImages}
+                    t={t}
+                    cancel={cancel}
+                    setCancel={setCancel}
+                />
+            </View>
+        );
+    }, [insets, sessionId, modalVisible, modalDetailsVisible, selectedImages, t, cancel]);
+
    return (
        <SafeAreaView style={{ flex: 1 }}>
            <FlatList
                ref={ref}
                data={userMessages}
                keyExtractor={keyExtractor}
-                renderItem={({ item, index }) => {
-                    const itemStyle = index === 0 ? { marginTop: 16, marginHorizontal: 16 } : { marginHorizontal: 16 };
-                    return (
-                        <View style={itemStyle}>
-                            {MessageItem({ setCancel, cancel, t, setSelectedImages, selectedImages, insets, item, sessionId, modalVisible, setModalVisible, setModalDetailsVisible, modalDetailsVisible })}
-                        </View>
-                    );
-                }}
+                renderItem={renderMessageItem}
                contentContainerStyle={contentContainerStyle}
                keyboardDismissMode="interactive"
                keyboardShouldPersistTaps="handled"
@ -61,8 +77,21 @@ function ChatComponent(
                windowSize={11}
                {...restProps} // 将所有其他属性传递给 FlatList
            />
+            {/* 单个图片弹窗 */}
+            <SingleContentModel modalVisible={modalVisible} setModalVisible={setModalVisible} />
+            {/* 全部图片详情弹窗 */}
+            <SelectModel
+                modalDetailsVisible={modalDetailsVisible}
+                setModalDetailsVisible={setModalDetailsVisible}
+                insets={insets}
+                setSelectedImages={setSelectedImages}
+                selectedImages={selectedImages}
+                t={t}
+                setCancel={setCancel}
+                cancel={cancel}
+            />
        </SafeAreaView>
    );
 }

-export default memo(forwardRef(ChatComponent));
+export default React.memo(forwardRef(ChatComponent));
--- a/components/chat/message-item/MessageBubble.tsx
+++ b/components/chat/message-item/MessageBubble.tsx
@ -43,4 +43,4 @@ const MessageBubble = ({
  );
 };

-export default MessageBubble;
+export default React.memo(MessageBubble);
--- a/components/chat/message-item/MessageContent.tsx
+++ b/components/chat/message-item/MessageContent.tsx
@ -1,8 +1,9 @@
 import MoreSvg from "@/assets/icons/svg/more.svg";
 import { ContentPart, getMessageText, isMessageContainMedia } from "@/types/ask";
+import { MarkdownTextInput, parseExpensiMark } from '@expensify/react-native-live-markdown';
 import { TFunction } from 'i18next';
 import React from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import Loading from '../../ask/threeCircle';
 import { ThemedText } from "../../ThemedText";
 import MediaGrid from './MediaGrid';
@ -18,6 +19,8 @@ interface MessageContentProps {
    setModalDetailsVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, content: any }>>;
 }

+
+
 const MessageContent = ({
    item,
    isUser,
@ -30,14 +33,15 @@ const MessageContent = ({
 }: MessageContentProps) => {
    return (
        <View className={`${isUser ? 'bg-bgPrimary' : 'bg-aiBubble'}`}>
-            <Text className={`text-base ${isUser ? 'text-[#4C320C]' : 'text-black'} leading-6 font-semibold`}>
-                {!isUser
-                    ? getMessageText(item) == "keepSearchIng"
-                        ? <Loading />
-                        : getMessageText(item)
-                    : getMessageText(item)
-                }
-            </Text>
+            {getMessageText(item) == "keepSearchIng" && !isUser ? (
+                <Loading />
+            ) : (
+                <MarkdownTextInput
+                    value={getMessageText(item)}
+                    parser={parseExpensiMark}
+                />
+            )}
+

            {isMessageContainMedia(item) && (
                <View className="relative">
@ -74,4 +78,4 @@ const MessageContent = ({
    );
 };

-export default MessageContent;
+export default React.memo(MessageContent);
--- a/components/chat/message-item/MessageRow.tsx
+++ b/components/chat/message-item/MessageRow.tsx
@ -47,4 +47,4 @@ const MessageRow = ({
  );
 };

-export default MessageRow;
+export default React.memo(MessageRow);
--- a/components/chat/message-item/message-item.tsx
+++ b/components/chat/message-item/message-item.tsx
@ -6,8 +6,7 @@ import {
    StyleSheet,
    View
 } from 'react-native';
-import SelectModel from "../../ask/selectModel";
-import SingleContentModel from "../../ask/singleContentModel";
+
 import MessageRow from './MessageRow';

 interface RenderMessageProps {
@ -54,23 +53,11 @@ const MessageItem = ({ setCancel, cancel = true, t, insets, item, sessionId, set
                        ))}
                    </View>
                )} */}
-                {/* 单个图片弹窗 */}
-                <SingleContentModel modalVisible={modalVisible} setModalVisible={setModalVisible} />
-                {/* 全部图片详情弹窗 */}
-                <SelectModel
-                    modalDetailsVisible={modalDetailsVisible}
-                    setModalDetailsVisible={setModalDetailsVisible}
-                    insets={insets}
-                    setSelectedImages={setSelectedImages}
-                    selectedImages={selectedImages}
-                    t={t}
-                    setCancel={setCancel}
-                    cancel={cancel}
-                />
+
            </View>
        </View>
    );
 };

-export default MessageItem;
+export default React.memo(MessageItem);

--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,7 @@
      "name": "memowake",
      "version": "1.0.0",
      "dependencies": {
+        "@expensify/react-native-live-markdown": "^0.1.299",
        "@expo/vector-icons": "^14.1.0",
        "@react-native-masked-view/masked-view": "0.3.2",
        "@react-navigation/bottom-tabs": "^7.3.10",
@ -17,6 +18,7 @@
        "@twotalltotems/react-native-otp-input": "^1.3.11",
        "@types/p-limit": "^2.2.0",
        "@types/react-redux": "^7.1.34",
+        "expensify-common": "^2.0.154",
        "expo": "53.0.19",
        "expo-audio": "~0.4.8",
        "expo-background-task": "^0.2.8",
@ -49,6 +51,7 @@
        "expo-video": "~2.2.2",
        "expo-video-thumbnails": "~9.1.3",
        "expo-web-browser": "~14.2.0",
+        "html-entities": "2.5.3",
        "i18next": "^25.2.1",
        "i18next-browser-languagedetector": "^8.2.0",
        "i18next-http-backend": "^3.0.2",
@ -77,7 +80,8 @@
        "react-native-view-shot": "4.0.3",
        "react-native-web": "~0.20.0",
        "react-native-webview": "13.13.5",
-        "react-redux": "^9.2.0"
+        "react-redux": "^9.2.0",
+        "worklet": "^1.0.3"
      },
      "devDependencies": {
        "@babel/core": "^7.25.2",
@ -2252,6 +2256,25 @@
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      }
    },
+    "node_modules/@expensify/react-native-live-markdown": {
+      "version": "0.1.299",
+      "resolved": "https://registry.npmmirror.com/@expensify/react-native-live-markdown/-/react-native-live-markdown-0.1.299.tgz",
+      "integrity": "sha512-kqbNG726Xtk3V2TFll1rxJSRdAQUZ2Ret3bEYopEm49fcy5FLCQZ76MVm5yg6dbpnYnqRukQ+aIut1lEXzoMiw==",
+      "license": "MIT",
+      "workspaces": [
+        "./example",
+        "./WebExample"
+      ],
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "peerDependencies": {
+        "expensify-common": ">=2.0.115",
+        "react": "*",
+        "react-native": "*",
+        "react-native-reanimated": ">=3.17.0"
+      }
+    },
    "node_modules/@expo/cli": {
      "version": "0.24.20",
      "resolved": "https://registry.npmjs.org/@expo/cli/-/cli-0.24.20.tgz",
@ -5979,6 +6002,20 @@
      "integrity": "sha512-aDczADvlvTGajTDjcjpJMqRkOF6Qdz3YbPZm/PyW6tKPkx2hlYBzxMhEywM/tU72HrVZjgl5VCdRuMlA7pZ8Gw==",
      "license": "MIT"
    },
+    "node_modules/awesome-phonenumber": {
+      "version": "5.11.0",
+      "resolved": "https://registry.npmmirror.com/awesome-phonenumber/-/awesome-phonenumber-5.11.0.tgz",
+      "integrity": "sha512-25GfikMIo6CBQIqvjoewo4uiu5Ai7WqEC8gxesH3LDwCY43oEdkLaT15a+8adC7uWIJCGh+YQiBY5bjmDpoQcg==",
+      "license": "MIT",
+      "workspaces": [
+        "webpack",
+        "cjs-test",
+        "esm-test"
+      ],
+      "engines": {
+        "node": ">=14"
+      }
+    },
    "node_modules/babel-jest": {
      "version": "29.7.0",
      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
@ -6688,6 +6725,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/classnames": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.0.tgz",
+      "integrity": "sha512-FQuRlyKinxrb5gwJlfVASbSrDlikDJ07426TrfPsdGLvtochowmkbnSFdQGJ2aoXrSetq5KqGV9emvWpy+91xA==",
+      "license": "MIT",
+      "workspaces": [
+        "benchmarks"
+      ]
+    },
    "node_modules/cli-cursor": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
@ -6718,6 +6764,17 @@
      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
      "license": "MIT"
    },
+    "node_modules/clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "license": "MIT",
+      "dependencies": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
    "node_modules/cliui": {
      "version": "8.0.1",
      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@ -7418,6 +7475,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "license": "MIT"
+    },
    "node_modules/depd": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@ -8637,6 +8700,78 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/expensify-common": {
+      "version": "2.0.154",
+      "resolved": "https://registry.npmmirror.com/expensify-common/-/expensify-common-2.0.154.tgz",
+      "integrity": "sha512-CtzYZFP/n+b390IPEfpXo4GYW7CdaQz0S776NYCABH5LFbF2355N0utD3pB9Z+hKYgru7wGs0sOo7RYiTlmxWg==",
+      "license": "MIT",
+      "dependencies": {
+        "awesome-phonenumber": "^5.4.0",
+        "classnames": "2.5.0",
+        "clipboard": "2.0.11",
+        "html-entities": "^2.5.2",
+        "jquery": "3.6.0",
+        "localforage": "^1.10.0",
+        "lodash": "4.17.21",
+        "prop-types": "15.8.1",
+        "react": "16.12.0",
+        "react-dom": "16.12.0",
+        "semver": "^7.6.3",
+        "simply-deferred": "git+https://github.com/Expensify/simply-deferred.git#77a08a95754660c7bd6e0b6979fdf84e8e831bf5",
+        "ua-parser-js": "^1.0.38"
+      }
+    },
+    "node_modules/expensify-common/node_modules/react": {
+      "version": "16.12.0",
+      "resolved": "https://registry.npmmirror.com/react/-/react-16.12.0.tgz",
+      "integrity": "sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expensify-common/node_modules/react-dom": {
+      "version": "16.12.0",
+      "resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-16.12.0.tgz",
+      "integrity": "sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.18.0"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0"
+      }
+    },
+    "node_modules/expensify-common/node_modules/scheduler": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmmirror.com/scheduler/-/scheduler-0.18.0.tgz",
+      "integrity": "sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "node_modules/expensify-common/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/expo": {
      "version": "53.0.19",
      "resolved": "https://registry.npmjs.org/expo/-/expo-53.0.19.tgz",
@ -9926,6 +10061,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "license": "MIT",
+      "dependencies": {
+        "delegate": "^3.1.2"
+      }
+    },
    "node_modules/gopd": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@ -10097,6 +10241,22 @@
      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
      "license": "ISC"
    },
+    "node_modules/html-entities": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmmirror.com/html-entities/-/html-entities-2.5.3.tgz",
+      "integrity": "sha512-D3AfvN7SjhTgBSA8L1BN4FpPzuEd06uy4lHwSoRWr0lndi9BKaNzPLKGOWZ2ocSGguozr08TTb2jhCLHaemruw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/mdevils"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/mdevils"
+        }
+      ],
+      "license": "MIT"
+    },
    "node_modules/html-escaper": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@ -10356,6 +10516,12 @@
        "node": ">=16.x"
      }
    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
    "node_modules/immer": {
      "version": "10.1.1",
      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
@ -12143,6 +12309,12 @@
        "jiti": "bin/jiti.js"
      }
    },
+    "node_modules/jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
+      "license": "MIT"
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -12292,6 +12464,15 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
    "node_modules/lighthouse-logger": {
      "version": "1.4.2",
      "resolved": "https://registry.npmjs.org/lighthouse-logger/-/lighthouse-logger-1.4.2.tgz",
@ -12572,6 +12753,15 @@
        "uc.micro": "^1.0.1"
      }
    },
+    "node_modules/localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmmirror.com/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lie": "3.1.1"
+      }
+    },
    "node_modules/locate-path": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@ -12587,6 +12777,12 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
    "node_modules/lodash.debounce": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@ -16051,6 +16247,12 @@
      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
      "license": "MIT"
    },
+    "node_modules/select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==",
+      "license": "MIT"
+    },
    "node_modules/semver": {
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@ -16477,6 +16679,14 @@
      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
      "license": "MIT"
    },
+    "node_modules/simply-deferred": {
+      "version": "3.0.0",
+      "resolved": "git+ssh://git@github.com/Expensify/simply-deferred.git#77a08a95754660c7bd6e0b6979fdf84e8e831bf5",
+      "integrity": "sha512-ozF7i2XEEBIcuRW+ThH+wmMeww//KEf1W3MhLHo4aOBmaxvZhBPpKoMCDmvNCIA5HPkkxe6x5XFGkSqHwCd6DQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/sisteransi": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@ -17253,6 +17463,12 @@
      "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==",
      "license": "MIT"
    },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "license": "MIT"
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.14",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
@ -18173,6 +18389,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/worklet": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/worklet/-/worklet-1.0.3.tgz",
+      "integrity": "sha512-fU9QogyerNeIu0QBRTAQC1vcOf0NA8eCIJnSRDr+j7N4m+I8OrVd0VBEBhcNEs3rwGl569Hh2NWEOD5lRXlbRg==",
+      "license": "ISC"
+    },
    "node_modules/wrap-ansi": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -14,6 +14,7 @@
    "test": "jest"
  },
  "dependencies": {
+    "@expensify/react-native-live-markdown": "^0.1.299",
    "@expo/vector-icons": "^14.1.0",
    "@react-native-masked-view/masked-view": "0.3.2",
    "@react-navigation/bottom-tabs": "^7.3.10",
@ -23,6 +24,7 @@
    "@twotalltotems/react-native-otp-input": "^1.3.11",
    "@types/p-limit": "^2.2.0",
    "@types/react-redux": "^7.1.34",
+    "expensify-common": "^2.0.154",
    "expo": "53.0.19",
    "expo-audio": "~0.4.8",
    "expo-background-task": "^0.2.8",
@ -55,6 +57,7 @@
    "expo-video": "~2.2.2",
    "expo-video-thumbnails": "~9.1.3",
    "expo-web-browser": "~14.2.0",
+    "html-entities": "2.5.3",
    "i18next": "^25.2.1",
    "i18next-browser-languagedetector": "^8.2.0",
    "i18next-http-backend": "^3.0.2",
@ -83,7 +86,8 @@
    "react-native-view-shot": "4.0.3",
    "react-native-web": "~0.20.0",
    "react-native-webview": "13.13.5",
-    "react-redux": "^9.2.0"
+    "react-redux": "^9.2.0",
+    "worklet": "^1.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",