chore: improve local ai settings page (#7651)

* chore: improve local ai settings page

* chore: move local to top in select list

* chore: improve copy of missing model

* chore: remove green background and add progress indicator

* chore: change text color

Author: richardshiue

frontend/appflowy_flutter/lib/workspace/application/settings/ai/local_ai_bloc.dart

@@ -1,94 +1,145 @@
 import 'dart:async';
 
 import 'package:appflowy_backend/dispatch/dispatch.dart';
+import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-ai/entities.pb.dart';
-import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_result/appflowy_result.dart';
 import 'package:bloc/bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
+
+import 'local_llm_listener.dart';
+
 part 'local_ai_bloc.freezed.dart';
 
-class LocalAIToggleBloc extends Bloc<LocalAIToggleEvent, LocalAIToggleState> {
-  LocalAIToggleBloc() : super(const LocalAIToggleState()) {
-    on<LocalAIToggleEvent>(_handleEvent);
+class LocalAiPluginBloc extends Bloc<LocalAiPluginEvent, LocalAiPluginState> {
+  LocalAiPluginBloc() : super(const LoadingLocalAiPluginState()) {
+    on<LocalAiPluginEvent>(_handleEvent);
+    _startListening();
+    _getLocalAiState();
+  }
+
+  final listener = LocalAIStateListener();
+
+  @override
+  Future<void> close() async {
+    await listener.stop();
+    return super.close();
   }
 
   Future<void> _handleEvent(
-    LocalAIToggleEvent event,
-    Emitter<LocalAIToggleState> emit,
+    LocalAiPluginEvent event,
+    Emitter<LocalAiPluginState> emit,
   ) async {
     await event.when(
-      started: () async {
-        final result = await AIEventGetLocalAIState().send();
-        _handleResult(emit, result);
-      },
-      toggle: () async {
+      didReceiveAiState: (aiState) {
         emit(
-          state.copyWith(
-            pageIndicator: const LocalAIToggleStateIndicator.loading(),
+          LocalAiPluginState.ready(
+            isEnabled: aiState.enabled,
+            version: aiState.pluginVersion,
+            runningState: aiState.state,
+            lackOfResource:
+                aiState.hasLackOfResource() ? aiState.lackOfResource : null,
           ),
         );
-        unawaited(
-          AIEventToggleLocalAI().send().then(
-            (result) {
-              if (!isClosed) {
-                add(LocalAIToggleEvent.handleResult(result));
-              }
-            },
-          ),
+      },
+      didReceiveLackOfResources: (resources) {
+        state.maybeMap(
+          ready: (readyState) {
+            emit(readyState.copyWith(lackOfResource: resources));
+          },
+          orElse: () {},
         );
       },
-      handleResult: (result) {
-        _handleResult(emit, result);
+      toggle: () async {
+        emit(LocalAiPluginState.loading());
+        await AIEventToggleLocalAI().send().fold(
+          (aiState) {
+            add(LocalAiPluginEvent.didReceiveAiState(aiState));
+          },
+          Log.error,
+        );
+      },
+      restart: () async {
+        emit(LocalAiPluginState.loading());
+        await AIEventRestartLocalAI().send();
       },
     );
   }
 
-  void _handleResult(
-    Emitter<LocalAIToggleState> emit,
-    FlowyResult<LocalAIPB, FlowyError> result,
-  ) {
-    result.fold(
-      (localAI) {
-        emit(
-          state.copyWith(
-            pageIndicator:
-                LocalAIToggleStateIndicator.isEnabled(localAI.enabled),
-          ),
-        );
+  void _startListening() {
+    listener.start(
+      stateCallback: (pluginState) {
+        add(LocalAiPluginEvent.didReceiveAiState(pluginState));
       },
-      (err) {
-        emit(
-          state.copyWith(
-            pageIndicator: LocalAIToggleStateIndicator.error(err),
-          ),
-        );
+      resourceCallback: (data) {
+        add(LocalAiPluginEvent.didReceiveLackOfResources(data));
       },
     );
   }
-}
 
-@freezed
-class LocalAIToggleEvent with _$LocalAIToggleEvent {
-  const factory LocalAIToggleEvent.started() = _Started;
-  const factory LocalAIToggleEvent.toggle() = _Toggle;
-  const factory LocalAIToggleEvent.handleResult(
-    FlowyResult<LocalAIPB, FlowyError> result,
-  ) = _HandleResult;
+  void _getLocalAiState() {
+    AIEventGetLocalAIState().send().fold(
+      (aiState) {
+        add(LocalAiPluginEvent.didReceiveAiState(aiState));
+      },
+      Log.error,
+    );
+  }
 }
 
 @freezed
-class LocalAIToggleState with _$LocalAIToggleState {
-  const factory LocalAIToggleState({
-    @Default(LocalAIToggleStateIndicator.loading())
-    LocalAIToggleStateIndicator pageIndicator,
-  }) = _LocalAIToggleState;
+class LocalAiPluginEvent with _$LocalAiPluginEvent {
+  const factory LocalAiPluginEvent.didReceiveAiState(LocalAIPB aiState) =
+      _DidReceiveAiState;
+  const factory LocalAiPluginEvent.didReceiveLackOfResources(
+    LackOfAIResourcePB resources,
+  ) = _DidReceiveLackOfResources;
+  const factory LocalAiPluginEvent.toggle() = _Toggle;
+  const factory LocalAiPluginEvent.restart() = _Restart;
 }
 
 @freezed
-class LocalAIToggleStateIndicator with _$LocalAIToggleStateIndicator {
-  // when start downloading the model
-  const factory LocalAIToggleStateIndicator.error(FlowyError error) = _OnError;
-  const factory LocalAIToggleStateIndicator.isEnabled(bool isEnabled) = _Ready;
-  const factory LocalAIToggleStateIndicator.loading() = _Loading;
+class LocalAiPluginState with _$LocalAiPluginState {
+  const LocalAiPluginState._();
+
+  const factory LocalAiPluginState.ready({
+    required bool isEnabled,
+    required String version,
+    required RunningStatePB runningState,
+    required LackOfAIResourcePB? lackOfResource,
+  }) = ReadyLocalAiPluginState;
+
+  const factory LocalAiPluginState.loading() = LoadingLocalAiPluginState;
+
+  bool get isEnabled {
+    return maybeWhen(
+      ready: (isEnabled, _, __, ___) => isEnabled,
+      orElse: () => false,
+    );
+  }
+
+  bool get showIndicator {
+    return maybeWhen(
+      ready: (isEnabled, _, runningState, lackOfResource) =>
+          runningState != RunningStatePB.Running || lackOfResource != null,
+      orElse: () => false,
+    );
+  }
+
+  bool get showSettings {
+    return maybeWhen(
+      ready: (isEnabled, _, runningState, lackOfResource) {
+        final isConnecting = [
+          RunningStatePB.Connecting,
+          RunningStatePB.Connected,
+        ].contains(runningState);
+
+        final resourcesReadyOrMissingModel = lackOfResource == null ||
+            lackOfResource.resourceType == LackOfAIResourceTypePB.MissingModel;
+
+        return !isConnecting && resourcesReadyOrMissingModel;
+      },
+      orElse: () => false,
+    );
+  }
 }

frontend/appflowy_flutter/lib/workspace/application/settings/ai/local_ai_on_boarding_bloc.dart

@@ -26,7 +26,7 @@ class LocalAIOnBoardingBloc
     _dispatch();
   }
 
-  Future<void> _onPaymentSuccessful() async {
+  void _onPaymentSuccessful() {
     if (isClosed) {
       return;
     }

frontend/appflowy_flutter/lib/workspace/application/settings/ai/local_ai_setting_panel_bloc.dart

@@ -80,11 +80,9 @@ class OllamaSettingBloc extends Bloc<OllamaSettingEvent, OllamaSettingState> {
         }
         add(OllamaSettingEvent.updateSetting(setting));
         AIEventUpdateLocalAISetting(setting).send().fold(
-          (_) {
-            Log.info('AI setting updated successfully');
-          },
-          (err) => Log.error("update ai setting failed: $err"),
-        );
+              (_) => Log.info('AI setting updated successfully'),
+              (err) => Log.error("update ai setting failed: $err"),
+            );
       },
     );
   }