bluenote/src/components/chat-message/MessageRich.tsx

import { View, Image } from "@tarojs/components";
import ThinkAnimation from "../think-animation/index";
import style from "./index.module.less";
interface Props {
  loading?: boolean;
  data?: {
    avatar: string,
    name: string
  },
  children?: JSX.Element | JSX.Element[];
}
export default ({ loading, children, data }: Props) => {
  return (
    <View className="flex gap-8 items-start justify-end">
      <View className="flex justify-end">
        <View className={`${style.message}  ${style.messageMeRich}`}>
          <View className={style.messageContent}>
            {loading && <ThinkAnimation></ThinkAnimation>}
            {children}
          </View>
        </View>
      </View>
      <View className={style.avatarContainer}>
        {data && <Image className={style.avatar} src={data?.avatar} mode="widthFix"></Image>}
      </View>
    </View>
  );
};