ElectronicAssistant/lib/module/chat/view.dart

import 'package:electronic_assistant/base/base_page.dart';
import 'package:electronic_assistant/data/bean/chat_item.dart';
import 'package:electronic_assistant/module/chat/controller.dart';
import 'package:electronic_assistant/resource/colors.gen.dart';
import 'package:electronic_assistant/utils/expand.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:lottie/lottie.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import '../../data/bean/progressing_chat_item.dart';
import '../../resource/assets.gen.dart';

class ChatPage extends BasePage<ChatController> {
  const ChatPage({super.key});

  @override
  bool immersive() {
    return true;
  }

  @override
  Widget buildBody(BuildContext context) {
    // 第一次启动时弹出定制窗口
    controller.showStartSheet(context);

    return Stack(
      children: [
        buildBackgroundGradient(),
        buildTopGradient(),
        Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            leading: IconButton(
              icon: const Icon(Icons.arrow_back_ios_new_rounded),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            scrolledUnderElevation: 0,
            backgroundColor: Colors.transparent,
            systemOverlayStyle: SystemUiOverlayStyle.dark,
            centerTitle: true,
            title: IntrinsicWidth(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image(
                      image: Assets.images.iconChatXiaoTin.provider(),
                      width: 28.w,
                      height: 28.w),
                  Container(
                      margin: EdgeInsets.only(left: 6.w),
                      child: Text('聊天',
                          style: TextStyle(
                              fontSize: 16.w,
                              fontWeight: FontWeight.bold,
                              color: ColorName.primaryTextColor))),
                ],
              ),
            ),
          ),
          body: buildBodyContent(context),
        )
      ],
    );
  }

  Widget buildBodyContent(BuildContext context) {
    return Column(
      children: [
        Expanded(
            child: Container(
          padding: EdgeInsets.symmetric(horizontal: 12.w),
          child: Obx(() {
            return NotificationListener<ScrollNotification>(
              onNotification: (scrollNotification) {
                if (scrollNotification is ScrollStartNotification) {
                  FocusScope.of(context).unfocus();
                }
                return false;
              },
              child: SmartRefresher(
                controller: controller.refreshController,
                footer: CustomFooter(
                  loadStyle: LoadStyle.ShowWhenLoading,
                  builder: (context, mode) {
                    if (mode == LoadStatus.loading ||
                        mode == LoadStatus.canLoading) {
                      return const SizedBox(
                        height: 60.0,
                        child: SizedBox(
                          height: 20.0,
                          width: 20.0,
                          child: CupertinoActivityIndicator(),
                        ),
                      );
                    } else {
                      return Container();
                    }
                  },
                ),
                enablePullDown: false,
                enablePullUp: true,
                onLoading: controller.loadMoreHistory,
                onRefresh: controller.loadMoreHistory,
                child: ListView.builder(
                    reverse: true,
                    controller: controller.listScrollController,
                    itemBuilder: _chatItemBuilder,
                    itemCount: controller.chatItems.length),
              ),
            );
          }),
        )),
        Container(
          margin: EdgeInsets.symmetric(horizontal: 12.w, vertical: 12.h),
          width: 1.sw,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(24.w),
              boxShadow: const [
                BoxShadow(
                  color: Color(0x4CDDDEE8),
                  blurRadius: 10,
                  offset: Offset(0, 4),
                  spreadRadius: 0,
                )
              ]),
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
            child: Column(
              children: [
                Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Expanded(
                        child: Container(
                      margin: EdgeInsets.only(right: 6.w),
                      child: CupertinoTextField(
                        controller: controller.inputController,
                        padding: EdgeInsets.symmetric(vertical: 3.w),
                        style: TextStyle(
                            fontSize: 14.w, color: ColorName.primaryTextColor),
                        placeholder: '有问题尽管问我~',
                        placeholderStyle: TextStyle(
                            fontSize: 14.w, color: const Color(0xFFAFAFAF)),
                        textCapitalization: TextCapitalization.sentences,
                        textInputAction: TextInputAction.newline,
                        cursorColor: ColorName.colorPrimary,
                        decoration: const BoxDecoration(),
                        expands: true,
                        maxLines: null,
                        minLines: null,
                      ),
                    )),
                    Image(
                        image: Assets.images.iconChatAddFile.provider(),
                        width: 26.w,
                        height: 26.w),
                    Container(
                      margin: EdgeInsets.only(left: 16.w),
                      child: GestureDetector(
                        onTap: () {
                          controller.sendMessage();
                        },
                        child: Image(
                            image: Assets.images.iconChatSend.provider(),
                            width: 26.w,
                            height: 26.w),
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _chatItemBuilder(BuildContext context, int index) {
    ChatItem chatItem = controller.chatItems[index];
    if (chatItem.role == 'user') {
      return _buildUserChatItem(context, chatItem);
    } else if (chatItem.role == 'assistant') {
      return _buildAssistantChatItem(context, chatItem);
    } else {
      return Container();
    }
  }

  Widget _buildAssistantChatItem(BuildContext context, ChatItem chatItem) {
    ProgressingChatItem? progressingChatItem;
    if (chatItem is ProgressingChatItem) {
      progressingChatItem = chatItem;
    }
    return Align(
      alignment: Alignment.centerLeft,
      child: IntrinsicWidth(
        child: progressingChatItem == null
            ? _buildAssistantChatItemContent(null, chatItem.content)
            : Obx(() {
                bool? isStreamStarted = progressingChatItem == null
                    ? null
                    : progressingChatItem.streamContent.isNotEmpty ||
                        progressingChatItem.isFinished.value ||
                        progressingChatItem.isFailed.value;
                return _buildAssistantChatItemContent(
                    isStreamStarted,
                    progressingChatItem!.isFailed.value
                        ? progressingChatItem.error.value
                        : progressingChatItem.streamContent.value);
              }),
      ),
    );
  }

  Container _buildAssistantChatItemContent(
      bool? isStreamStarted, String content) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 8.h),
      margin: EdgeInsets.symmetric(vertical: 10.h),
      alignment: Alignment.centerLeft,
      constraints: BoxConstraints(
        maxWidth: 0.78.sw, // 65% of screen width
      ),
      decoration: BoxDecoration(
          border: isStreamStarted == null || isStreamStarted == true
              ? null
              : Border.all(color: ColorName.colorPrimary, width: 1.w),
          color: ColorName.white,
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(20.w),
              bottomRight: Radius.circular(20.w),
              bottomLeft: Radius.circular(20.w))),
      child: isStreamStarted != null && isStreamStarted == false
          ? Lottie.asset("assets/anim/anim_chat_response_loading.zip",
              width: 46.w, height: 20.w)
          : SelectableText(content,
              style:
                  TextStyle(fontSize: 14.w, color: ColorName.primaryTextColor)),
    );
  }

  Widget _buildUserChatItem(BuildContext context, ChatItem chatItem) {
    return Align(
      alignment: Alignment.centerRight,
      child: IntrinsicWidth(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 8.h),
          margin: EdgeInsets.symmetric(vertical: 10.h),
          alignment: Alignment.centerRight,
          constraints: BoxConstraints(
            maxWidth: 0.78.sw, // 65% of screen width
          ),
          decoration: BoxDecoration(
              color: ColorName.colorPrimary,
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(16.w),
                  bottomRight: Radius.circular(16.w),
                  bottomLeft: Radius.circular(16.w))),
          child: Text(chatItem.content,
              style: TextStyle(fontSize: 14.w, color: ColorName.white)),
        ),
      ),
    );
  }

  Widget buildTopGradient() {
    return Container(
        width: 1.sw,
        height: 128.h,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: ['#E8EBFF'.toColor(), '#00E8EBFF'.toColor()],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            stops: const [0.5, 1.0],
          ),
        ));
  }

  Widget buildBackgroundGradient() {
    return Container(
      width: 1.sw,
      height: 1.sh,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: ['#F2F8F4'.toColor(), '#F6F6F6'.toColor()],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          stops: const [0, 1.0],
        ),
      ),
    );
  }
}