didvan-app/lib/views/ai/ai.dart

  // lib/views/ai/ai.dart

  import 'package:didvan/config/design_config.dart';
  import 'package:didvan/config/theme_data.dart';
  import 'package:didvan/constants/app_icons.dart';
  import 'package:didvan/constants/assets.dart';
  import 'package:didvan/models/ai/ai_chat_args.dart';
  import 'package:didvan/views/ai/ai_state.dart';
  import 'package:didvan/views/ai/history_ai_chat_state.dart';
  import 'package:didvan/views/ai/tool_screen.dart';
  import 'package:didvan/views/ai/widgets/message_bar_btn.dart';
  import 'package:didvan/views/widgets/didvan/text.dart';
  import 'package:didvan/views/widgets/shimmer_placeholder.dart';
  import 'package:didvan/views/widgets/state_handlers/empty_connection.dart';
  import 'package:didvan/views/widgets/state_handlers/empty_state.dart';
  import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';

  class Ai extends StatefulWidget {
    const Ai({Key? key}) : super(key: key);

    @override
    // ignore: library_private_types_in_public_api
    _AiState createState() => _AiState();
  }

  class _AiState extends State<Ai> {
    @override
    void initState() {
      super.initState();
      context.read<AiState>().getTools();
      context.read<HistoryAiChatState>().getBots();
    }

    @override
    Widget build(BuildContext context) {
      return Stack(
        children: [
          Consumer<AiState>(
            builder: (BuildContext context, state, Widget? child) {
              switch (state.page) {
                case 1:
                  return const ToolScreen();
                case 0:
                default:
                  return Consumer<HistoryAiChatState>(
                    builder: (context, historyState, child) {
                      if (historyState.bots.isEmpty) {
                        return Center(
                          child: Image.asset(
                            Assets.loadingAnimation,
                            width: 60,
                            height: 60,
                          ),
                        );
                      }
                      final bot = historyState.bot!;
                      return Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Expanded(
                            child: SingleChildScrollView(
                              child: Padding(
                                padding:
                                    const EdgeInsets.only(bottom: 24, top: 70),
                                child: Column(
                                  children: [
                                    Consumer<AiState>(
                                      builder: (BuildContext context,
                                          AiState aiState, Widget? child) {
                                        final tools = aiState.tools;
                                        if (tools != null && tools.isEmpty) {
                                          return EmptyState(
                                            asset: Assets.emptyResult,
                                            title: 'لیست خالی است',
                                          );
                                        }
                                        if (aiState.loading) {
                                          return toolsPlaceHolder();
                                        }
                                        if (tools == null) {
                                          return Padding(
                                            padding: EdgeInsets.only(
                                                top: MediaQuery.sizeOf(context)
                                                        .height *
                                                    0.1),
                                            child: Center(
                                              child: EmptyConnection(
                                                onRetry: () {
                                                  context
                                                      .read<AiState>()
                                                      .getTools();
                                                },
                                              ),
                                            ),
                                          );
                                        }

                                        return const SizedBox();
                                      },
                                    )
                                  ],
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: [
                                InkWell(
                                    onTap: () =>
                                        context.read<AiState>().startChat(
                                            AiChatArgs(
                                                bot: bot,
                                                isTool: historyState.bots)),
                                    child: Column(
                                      children: [
                                        Row(
                                          children: [
                                            Expanded(
                                              child: Container(
                                                decoration: BoxDecoration(
                                                    color: Theme.of(context)
                                                        .colorScheme
                                                        .surface,
                                                    border: Border.all(
                                                        color:
                                                            const Color.fromARGB(
                                                                255, 0, 126, 167),
                                                        width: 1.5),
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            50)),
                                                child: Row(
                                                  children: [
                                                    Expanded(
                                                        child: Padding(
                                                            padding:
                                                                const EdgeInsets
                                                                    .symmetric(
                                                              horizontal: 8.0,
                                                            ),
                                                            child: Form(
                                                                child: Row(
                                                              children: [
                                                                const MessageBarBtn(
                                                                    enable: true,
                                                                    icon: DidvanIcons
                                                                        .mic_regular),
                                                                const SizedBox(
                                                                  width: 8,
                                                                ),
                                                                Expanded(
                                                                  child:
                                                                      TextFormField(
                                                                    textInputAction:
                                                                        TextInputAction
                                                                            .newline,
                                                                    style: Theme.of(
                                                                            context)
                                                                        .textTheme
                                                                        .bodyMedium,
                                                                    minLines: 1,
                                                                    enabled:
                                                                        false,
                                                                    decoration:
                                                                        InputDecoration(
                                                                      border:
                                                                          InputBorder
                                                                              .none,
                                                                      hintText:
                                                                          'بنویسید یا پیام صوتی بگذارید...',
                                                                      hintStyle: Theme.of(
                                                                              context)
                                                                          .textTheme
                                                                          .bodySmall!
                                                                          .copyWith(
                                                                              color:
                                                                                  Theme.of(context).colorScheme.disabledText),
                                                                    ),
                                                                  ),
                                                                ),
                                                                const SizedBox(
                                                                  width: 8,
                                                                ),
                                                                MessageBarBtn(
                                                                    click: () {
                                                                      context
                                                                          .read<
                                                                              AiState>()
                                                                          .startChat(
                                                                              AiChatArgs(
                                                                            bot:
                                                                                bot,
                                                                            attach:
                                                                                true,
                                                                          ));
                                                                    },
                                                                    enable: false,
                                                                    icon: Icons
                                                                        .add),
                                                              ],
                                                            ))))
                                                  ],
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                        const Padding(
                                          padding:
                                              EdgeInsets.fromLTRB(8, 8, 8, 4),
                                          child: FittedBox(
                                            child: DidvanText(
                                              'مدل‌های هوش مصنوعی می‌توانند اشتباه کنند، صحت اطلاعات مهم را بررسی کنید.',
                                              style: TextStyle(
                                                  fontWeight: FontWeight.w600),
                                            ),
                                          ),
                                        )
                                      ],
                                    )),
                              ],
                            ),
                          ),
                        ],
                      );
                    },
                  );
              }
            },
          ),
        ],
      );
    }

    ListView toolsPlaceHolder() {
      return ListView.builder(
        itemCount: 10,
        shrinkWrap: true,
        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 24),
        physics: const NeverScrollableScrollPhysics(),
        itemBuilder: (context, index) {
          return Container(
            decoration: BoxDecoration(
              borderRadius: DesignConfig.lowBorderRadius,
              border: Border.all(
                color: const Color(0xffB8B8B8),
              ),
            ),
            padding: const EdgeInsets.all(24),
            margin: const EdgeInsets.symmetric(vertical: 8),
            child: Row(
              children: [
                ShimmerPlaceholder(
                  width: 75,
                  height: 75,
                  borderRadius: BorderRadius.circular(360),
                ),
                const SizedBox(
                  width: 8,
                ),
                const Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          ShimmerPlaceholder(
                            width: 120,
                            height: 24,
                            borderRadius: DesignConfig.mediumBorderRadius,
                          ),
                          ShimmerPlaceholder(
                            width: 60,
                            height: 24,
                            borderRadius: DesignConfig.mediumBorderRadius,
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 8,
                      ),
                      ShimmerPlaceholder(
                        width: 120,
                        height: 24,
                        borderRadius: DesignConfig.mediumBorderRadius,
                      ),
                      SizedBox(
                        height: 8,
                      ),
                      ShimmerPlaceholder(
                        width: 240,
                        height: 46,
                        borderRadius: DesignConfig.mediumBorderRadius,
                      ),
                    ],
                  ),
                )
              ],
            ),
          );
        },
      );
    }
  }