first implementation finished
This commit is contained in:
@@ -0,0 +1,344 @@
|
||||
import 'package:animations/animations.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
|
||||
import 'package:flutter_material_design_icons/flutter_material_design_icons.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:kagi_bang_bang/core/routing/routes.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/domain/entities/modes.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/domain/entities/sheet.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/domain/providers.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/domain/services/create_tab.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/domain/services/session.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/presentation/widgets/app_bar_title.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/presentation/widgets/sheets/shared_content_sheet.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/presentation/widgets/sheets/view_tabs_sheet.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/presentation/widgets/tabs_action_button.dart';
|
||||
import 'package:kagi_bang_bang/features/settings/data/repositories/settings_repository.dart';
|
||||
import 'package:kagi_bang_bang/features/web_view/domain/repositories/web_view.dart';
|
||||
import 'package:kagi_bang_bang/features/web_view/presentation/controllers/switch_new_tab.dart';
|
||||
import 'package:kagi_bang_bang/features/web_view/presentation/widgets/web_page_dialog.dart';
|
||||
import 'package:kagi_bang_bang/presentation/hooks/listenable_callback.dart';
|
||||
import 'package:kagi_bang_bang/presentation/hooks/overlay_portal_controller.dart';
|
||||
import 'package:kagi_bang_bang/presentation/widgets/animated_indexed_stack.dart';
|
||||
import 'package:kagi_bang_bang/utils/ui_helper.dart' as ui_helper;
|
||||
import 'package:share_plus/share_plus.dart';
|
||||
import 'package:url_launcher/url_launcher.dart';
|
||||
|
||||
class KagiScreen extends HookConsumerWidget {
|
||||
const KagiScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final displayedSheet = ref.watch(bottomSheetProvider);
|
||||
final displayedOverlayDialog = ref.watch(overlayDialogProvider);
|
||||
|
||||
final lastBackButtonPress = useRef<DateTime?>(null);
|
||||
final webViewController = useRef<InAppWebViewController?>(null);
|
||||
|
||||
final overlayController = useOverlayPortalController();
|
||||
|
||||
ref.listen(
|
||||
overlayDialogProvider,
|
||||
(previous, next) {
|
||||
if (next != null) {
|
||||
overlayController.show();
|
||||
} else {
|
||||
overlayController.hide();
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
ref.listen(
|
||||
settingsRepositoryProvider
|
||||
.select((value) => value.valueOrNull?.kagiSession),
|
||||
(previous, next) async {
|
||||
if (next != null && next.isNotEmpty) {
|
||||
await ref.read(sessionServiceProvider.notifier).setKagiSession(next);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
automaticallyImplyLeading: false,
|
||||
title: AppBarTitle(
|
||||
onTap: () {
|
||||
final page = ref.read(webViewTabControllerProvider)?.page.value;
|
||||
|
||||
if (page != null) {
|
||||
ref.watch(overlayDialogProvider.notifier).show(
|
||||
WebPageDialog(
|
||||
page: page,
|
||||
webViewController: webViewController.value,
|
||||
onDismiss:
|
||||
ref.watch(overlayDialogProvider.notifier).dismiss,
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
),
|
||||
actions: [
|
||||
TabsActionButton(
|
||||
onTap: () {
|
||||
if (displayedSheet case ViewTabs()) {
|
||||
ref.read(bottomSheetProvider.notifier).dismiss();
|
||||
} else {
|
||||
ref.read(bottomSheetProvider.notifier).show(ViewTabs());
|
||||
}
|
||||
},
|
||||
),
|
||||
MenuAnchor(
|
||||
builder: (context, controller, child) {
|
||||
return IconButton(
|
||||
onPressed: () {
|
||||
if (controller.isOpen) {
|
||||
controller.close();
|
||||
} else {
|
||||
controller.open();
|
||||
}
|
||||
},
|
||||
icon: const Icon(Icons.more_vert),
|
||||
);
|
||||
},
|
||||
menuChildren: [
|
||||
HookConsumer(
|
||||
builder: (context, ref, child) {
|
||||
final activeWebView = ref.watch(webViewTabControllerProvider);
|
||||
final history = useListenableSelector(
|
||||
activeWebView?.page,
|
||||
() =>
|
||||
activeWebView?.page.value.pageHistory ??
|
||||
(canGoBack: false, canGoForward: false),
|
||||
);
|
||||
|
||||
return Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: IconButton(
|
||||
onPressed: (history.canGoBack)
|
||||
? () async {
|
||||
await webViewController.value?.goBack();
|
||||
}
|
||||
: null,
|
||||
icon: const Icon(Icons.arrow_back),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 48, child: VerticalDivider()),
|
||||
Expanded(
|
||||
child: IconButton(
|
||||
onPressed: (history.canGoForward)
|
||||
? () async {
|
||||
await webViewController.value?.goForward();
|
||||
}
|
||||
: null,
|
||||
icon: const Icon(Icons.arrow_forward),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
const Divider(),
|
||||
MenuItemButton(
|
||||
onPressed: () async {
|
||||
await webViewController.value?.reload();
|
||||
},
|
||||
leadingIcon: const Icon(Icons.refresh),
|
||||
child: const Text('Reload'),
|
||||
),
|
||||
const Divider(),
|
||||
MenuItemButton(
|
||||
onPressed: () async {
|
||||
await context.push(SettingsRoute().location);
|
||||
},
|
||||
leadingIcon: const Icon(Icons.settings),
|
||||
child: const Text('Settings'),
|
||||
),
|
||||
const Divider(),
|
||||
MenuItemButton(
|
||||
onPressed: () async {
|
||||
final url = await webViewController.value?.getUrl();
|
||||
if (url != null) {
|
||||
await Share.shareUri(url);
|
||||
}
|
||||
},
|
||||
leadingIcon: const Icon(Icons.share),
|
||||
child: const Text('Share'),
|
||||
),
|
||||
MenuItemButton(
|
||||
onPressed: () async {
|
||||
final url = await webViewController.value?.getUrl();
|
||||
if (url != null) {
|
||||
if (!await launchUrl(
|
||||
url,
|
||||
mode: LaunchMode.externalApplication,
|
||||
)) {
|
||||
if (context.mounted) {
|
||||
ui_helper.showErrorMessage(
|
||||
context,
|
||||
'Could not launch URL ($url)',
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
leadingIcon: const Icon(Icons.open_in_browser),
|
||||
child: const Text('Launch External'),
|
||||
),
|
||||
const Divider(),
|
||||
MenuItemButton(
|
||||
onPressed: () {
|
||||
ref.read(createTabStreamProvider.notifier).createTab(
|
||||
CreateTab(preferredTool: KagiTool.search),
|
||||
);
|
||||
},
|
||||
leadingIcon: const Icon(MdiIcons.searchWeb),
|
||||
child: const Text('Search'),
|
||||
),
|
||||
MenuItemButton(
|
||||
onPressed: () {
|
||||
ref.read(createTabStreamProvider.notifier).createTab(
|
||||
CreateTab(preferredTool: KagiTool.assistant),
|
||||
);
|
||||
},
|
||||
leadingIcon: const Icon(MdiIcons.brain),
|
||||
child: const Text('Assistant'),
|
||||
),
|
||||
MenuItemButton(
|
||||
onPressed: () {
|
||||
ref.read(createTabStreamProvider.notifier).createTab(
|
||||
CreateTab(preferredTool: KagiTool.summarizer),
|
||||
);
|
||||
},
|
||||
leadingIcon: const Icon(MdiIcons.text),
|
||||
child: const Text('Summarizer'),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
body: OverlayPortal(
|
||||
controller: overlayController,
|
||||
overlayChildBuilder: (context) {
|
||||
return displayedOverlayDialog!;
|
||||
},
|
||||
child: Listener(
|
||||
onPointerDown: (displayedSheet != null)
|
||||
? (_) {
|
||||
ref.read(bottomSheetProvider.notifier).dismiss();
|
||||
}
|
||||
: null,
|
||||
child: HookConsumer(
|
||||
builder: (context, ref, child) {
|
||||
final webViews = ref.watch(webViewRepositoryProvider);
|
||||
final activeWebView = ref.watch(webViewTabControllerProvider);
|
||||
useListenableCallback(activeWebView?.page, () {
|
||||
webViewController.value = activeWebView?.page.value.controller;
|
||||
});
|
||||
|
||||
return BackButtonListener(
|
||||
onBackButtonPressed: () async {
|
||||
if (activeWebView?.page.value.pageHistory.canGoBack == true) {
|
||||
await activeWebView?.page.value.controller?.goBack();
|
||||
return true;
|
||||
}
|
||||
|
||||
if (lastBackButtonPress.value != null &&
|
||||
lastBackButtonPress.value!.difference(DateTime.now()) <
|
||||
const Duration(seconds: 2)) {
|
||||
lastBackButtonPress.value = null;
|
||||
|
||||
return false;
|
||||
} else {
|
||||
lastBackButtonPress.value = DateTime.now();
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Please click BACK again to exit'),
|
||||
),
|
||||
);
|
||||
|
||||
return true;
|
||||
}
|
||||
},
|
||||
child: AnimatedIndexedStack(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
transitionBuilder: (child, animation, secondaryAnimation) =>
|
||||
SharedAxisTransition(
|
||||
animation: animation,
|
||||
secondaryAnimation: secondaryAnimation,
|
||||
transitionType: SharedAxisTransitionType.horizontal,
|
||||
child: child,
|
||||
),
|
||||
key: ValueKey(
|
||||
(activeWebView != null)
|
||||
? webViews.keys
|
||||
.toList()
|
||||
.indexOf(activeWebView.page.value.key)
|
||||
: null,
|
||||
),
|
||||
index: (activeWebView != null)
|
||||
? webViews.keys
|
||||
.toList()
|
||||
.indexOf(activeWebView.page.value.key)
|
||||
: null,
|
||||
children: webViews.values.toList(),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
bottomSheet: (displayedSheet != null)
|
||||
? NotificationListener<DraggableScrollableNotification>(
|
||||
onNotification: (notification) {
|
||||
if (notification.extent <= 0.1) {
|
||||
ref.read(bottomSheetProvider.notifier).dismiss();
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
child: switch (displayedSheet) {
|
||||
ViewTabs() => DraggableScrollableSheet(
|
||||
expand: false,
|
||||
minChildSize: 0.1,
|
||||
builder: (context, scrollController) {
|
||||
return SingleChildScrollView(
|
||||
controller: scrollController,
|
||||
child: ViewTabsSheet(
|
||||
onClose: () {
|
||||
ref.read(bottomSheetProvider.notifier).dismiss();
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
final CreateTab parameter => DraggableScrollableSheet(
|
||||
expand: false,
|
||||
initialChildSize: 0.8,
|
||||
minChildSize: 0.1,
|
||||
builder: (context, scrollController) {
|
||||
return SingleChildScrollView(
|
||||
controller: scrollController,
|
||||
child: SharedContentSheet(
|
||||
key: ObjectKey(parameter),
|
||||
parameter: parameter,
|
||||
onSubmit: (url) async {
|
||||
await ref
|
||||
.read(switchNewTabControllerProvider.notifier)
|
||||
.add(url);
|
||||
|
||||
ref.read(bottomSheetProvider.notifier).dismiss();
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
},
|
||||
)
|
||||
: null,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:flutter_material_design_icons/flutter_material_design_icons.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:kagi_bang_bang/features/web_view/domain/entities/web_view_page.dart';
|
||||
import 'package:kagi_bang_bang/features/web_view/domain/repositories/web_view.dart';
|
||||
import 'package:kagi_bang_bang/features/web_view/presentation/widgets/favicon.dart';
|
||||
import 'package:text_scroll/text_scroll.dart';
|
||||
|
||||
class AppBarTitle extends HookConsumerWidget {
|
||||
final void Function()? onTap;
|
||||
|
||||
const AppBarTitle({this.onTap, super.key});
|
||||
|
||||
Icon _securityStatusIcon(BuildContext context, WebViewPage page) {
|
||||
if (page.url.isScheme('http')) {
|
||||
return Icon(
|
||||
MdiIcons.lockOff,
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
size: 14,
|
||||
);
|
||||
} else if (page.sslError != null) {
|
||||
return Icon(
|
||||
MdiIcons.lockAlert,
|
||||
color: Theme.of(context).colorScheme.errorContainer,
|
||||
size: 14,
|
||||
);
|
||||
} else {
|
||||
return const Icon(
|
||||
MdiIcons.lock,
|
||||
size: 14,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final activeWebView = ref.watch(webViewTabControllerProvider);
|
||||
if (activeWebView == null) {
|
||||
return SizedBox.shrink();
|
||||
}
|
||||
|
||||
final page = useValueListenable(activeWebView.page);
|
||||
|
||||
final theme = Theme.of(context);
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
child: Row(
|
||||
children: [
|
||||
FaviconImage(
|
||||
webPageInfo: page,
|
||||
),
|
||||
const SizedBox(
|
||||
width: 8,
|
||||
),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
TextScroll(
|
||||
key: ValueKey(page.title),
|
||||
page.title ?? 'New Tab',
|
||||
style: theme.textTheme.bodyLarge
|
||||
?.copyWith(color: theme.colorScheme.onSurface),
|
||||
// mode: TextScrollMode.bouncing,
|
||||
velocity: const Velocity(pixelsPerSecond: Offset(75, 0)),
|
||||
delayBefore: const Duration(milliseconds: 500),
|
||||
pauseBetween: const Duration(milliseconds: 5000),
|
||||
fadedBorder: true,
|
||||
fadeBorderSide: FadeBorderSide.right,
|
||||
fadedBorderWidth: 0.05,
|
||||
intervalSpaces: 4,
|
||||
numberOfReps: 2,
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
_securityStatusIcon(context, page),
|
||||
const SizedBox(
|
||||
width: 4,
|
||||
),
|
||||
Text(
|
||||
page.url.authority,
|
||||
style: theme.textTheme.bodyMedium
|
||||
?.copyWith(color: theme.colorScheme.onSurface),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import 'package:expandable_page_view/expandable_page_view.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:flutter_material_design_icons/flutter_material_design_icons.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/domain/entities/modes.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/domain/entities/sheet.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/presentation/widgets/tabs/assistant_tab.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/presentation/widgets/tabs/search_tab.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/presentation/widgets/tabs/summarize_tab.dart';
|
||||
import 'package:kagi_bang_bang/features/share_intent/domain/entities/shared_content.dart';
|
||||
import 'package:kagi_bang_bang/presentation/hooks/sync_page_tab.dart';
|
||||
|
||||
typedef OnSubmitUri = void Function(Uri url);
|
||||
|
||||
class SharedContentSheet extends HookConsumerWidget {
|
||||
final CreateTab parameter;
|
||||
final OnSubmitUri onSubmit;
|
||||
|
||||
const SharedContentSheet({
|
||||
required this.parameter,
|
||||
required this.onSubmit,
|
||||
super.key,
|
||||
});
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final sharedContent = useMemoized(
|
||||
() => (parameter.content != null)
|
||||
? SharedContent.parse(parameter.content!)
|
||||
: null,
|
||||
);
|
||||
|
||||
final tabController = useTabController(
|
||||
initialLength: KagiTool.values.length,
|
||||
initialIndex: parameter.preferredTool?.index ??
|
||||
switch (sharedContent) {
|
||||
SharedText(text: final text) => (text.length > 25)
|
||||
? KagiTool.assistant.index
|
||||
: KagiTool.search.index,
|
||||
SharedUrl() => KagiTool.summarizer.index,
|
||||
null => KagiTool.assistant.index,
|
||||
},
|
||||
);
|
||||
final pageController = usePageController(initialPage: tabController.index);
|
||||
|
||||
useSyncPageWithTab(tabController, pageController);
|
||||
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
TabBar(
|
||||
controller: tabController,
|
||||
tabs: const [
|
||||
Tab(
|
||||
icon: Icon(MdiIcons.searchWeb),
|
||||
text: 'Search',
|
||||
),
|
||||
Tab(
|
||||
icon: Icon(MdiIcons.brain),
|
||||
text: 'Assistant',
|
||||
),
|
||||
Tab(
|
||||
icon: Icon(MdiIcons.text),
|
||||
text: 'Summarize',
|
||||
),
|
||||
],
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 12.0),
|
||||
child: ExpandablePageView(
|
||||
controller: pageController,
|
||||
children: [
|
||||
SearchTab(
|
||||
sharedContent: sharedContent,
|
||||
onSubmit: onSubmit,
|
||||
),
|
||||
AssistantTab(
|
||||
sharedContent: sharedContent,
|
||||
onSubmit: onSubmit,
|
||||
),
|
||||
SummarizeTab(
|
||||
sharedContent: sharedContent,
|
||||
onSubmit: onSubmit,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:kagi_bang_bang/features/web_view/domain/repositories/web_view.dart';
|
||||
import 'package:kagi_bang_bang/features/web_view/presentation/controllers/switch_new_tab.dart';
|
||||
import 'package:kagi_bang_bang/features/web_view/presentation/widgets/web_view_tab.dart';
|
||||
|
||||
class ViewTabsSheet extends HookConsumerWidget {
|
||||
final VoidCallback onClose;
|
||||
|
||||
const ViewTabsSheet({required this.onClose, super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
TextButton.icon(
|
||||
onPressed: () async {
|
||||
await ref
|
||||
.read(switchNewTabControllerProvider.notifier)
|
||||
.add(Uri.https('kagi.com'));
|
||||
|
||||
onClose();
|
||||
},
|
||||
icon: const Icon(Icons.add),
|
||||
label: const Text('New Tab'),
|
||||
),
|
||||
TextButton.icon(
|
||||
onPressed: () async {
|
||||
await ref
|
||||
.read(webViewRepositoryProvider.notifier)
|
||||
.closeAllTabs();
|
||||
},
|
||||
icon: const Icon(Icons.delete),
|
||||
label: const Text('Close All'),
|
||||
),
|
||||
],
|
||||
),
|
||||
Consumer(
|
||||
builder: (context, ref, child) {
|
||||
final tabs = ref.watch(
|
||||
webViewRepositoryProvider.select((tabs) => tabs.values),
|
||||
);
|
||||
final activeTab = ref.watch(
|
||||
webViewTabControllerProvider.select(
|
||||
(webView) => webView?.page.value.key,
|
||||
),
|
||||
);
|
||||
|
||||
return GridView.count(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
childAspectRatio: 0.75,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 4.0),
|
||||
mainAxisSpacing: 8.0,
|
||||
crossAxisSpacing: 8.0,
|
||||
crossAxisCount: 2,
|
||||
children: tabs
|
||||
.map(
|
||||
(webView) => WebViewTab(
|
||||
webView: webView,
|
||||
isActive: webView.key == activeTab,
|
||||
onClose: onClose,
|
||||
),
|
||||
)
|
||||
.toList(),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
import 'package:expandable_page_view/expandable_page_view.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:flutter_material_design_icons/flutter_material_design_icons.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/domain/entities/modes.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/presentation/widgets/sheets/shared_content_sheet.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/utils/url_builder.dart'
|
||||
as uri_builder;
|
||||
import 'package:kagi_bang_bang/features/share_intent/domain/entities/shared_content.dart';
|
||||
import 'package:kagi_bang_bang/presentation/hooks/sync_page_tab.dart';
|
||||
|
||||
class AssistantTab extends HookConsumerWidget {
|
||||
final SharedContent? sharedContent;
|
||||
final OnSubmitUri onSubmit;
|
||||
|
||||
const AssistantTab({
|
||||
required this.sharedContent,
|
||||
required this.onSubmit,
|
||||
super.key,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
useAutomaticKeepAlive();
|
||||
|
||||
final formKey = useMemoized(() => GlobalKey<FormState>());
|
||||
final textController =
|
||||
useTextEditingController(text: sharedContent?.toString());
|
||||
|
||||
final tabController =
|
||||
useTabController(initialLength: AssistantMode.values.length);
|
||||
final pageController = usePageController(initialPage: tabController.index);
|
||||
|
||||
useSyncPageWithTab(tabController, pageController);
|
||||
|
||||
final researchVariant = useState(ResearchVariant.expert);
|
||||
final chatModel = useState(ChatModel.gpt4Turbo);
|
||||
|
||||
return Form(
|
||||
key: formKey,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
TabBar.secondary(
|
||||
controller: tabController,
|
||||
tabs: const [
|
||||
Tab(
|
||||
text: 'Research',
|
||||
icon: Icon(MdiIcons.cloudSearch),
|
||||
),
|
||||
Tab(
|
||||
text: 'Code',
|
||||
icon: Icon(MdiIcons.codeJson),
|
||||
),
|
||||
Tab(
|
||||
text: 'Chat',
|
||||
icon: Icon(MdiIcons.commentTextMultiple),
|
||||
),
|
||||
Tab(
|
||||
text: 'Custom',
|
||||
icon: Icon(MdiIcons.creation),
|
||||
),
|
||||
],
|
||||
),
|
||||
ExpandablePageView(
|
||||
controller: pageController,
|
||||
children: [
|
||||
Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const SizedBox(
|
||||
height: 12,
|
||||
),
|
||||
SegmentedButton<ResearchVariant>(
|
||||
segments: const [
|
||||
ButtonSegment(
|
||||
value: ResearchVariant.expert,
|
||||
icon: Icon(MdiIcons.textSearch),
|
||||
label: Text('Research'),
|
||||
),
|
||||
ButtonSegment(
|
||||
value: ResearchVariant.fast,
|
||||
icon: Icon(MdiIcons.invoiceTextFast),
|
||||
label: Text('Fast'),
|
||||
),
|
||||
],
|
||||
selected: {researchVariant.value},
|
||||
onSelectionChanged: (value) {
|
||||
researchVariant.value = value.first;
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox.shrink(),
|
||||
Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const SizedBox(
|
||||
height: 12,
|
||||
),
|
||||
DropdownMenu<ChatModel>(
|
||||
initialSelection: chatModel.value,
|
||||
expandedInsets: EdgeInsets.zero,
|
||||
label: const Text('Model'),
|
||||
inputDecorationTheme: const InputDecorationTheme(),
|
||||
dropdownMenuEntries: ChatModel.values
|
||||
.map(
|
||||
(model) => DropdownMenuEntry(
|
||||
value: model,
|
||||
label: model.label,
|
||||
),
|
||||
)
|
||||
.toList(),
|
||||
onSelected: (value) {
|
||||
chatModel.value = value!;
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox.shrink(),
|
||||
],
|
||||
),
|
||||
const SizedBox(
|
||||
height: 12,
|
||||
),
|
||||
TextFormField(
|
||||
controller: textController,
|
||||
decoration: const InputDecoration(
|
||||
// border: OutlineInputBorder(),
|
||||
label: Text('Prompt'),
|
||||
),
|
||||
maxLines: null,
|
||||
validator: (value) {
|
||||
if (value?.isEmpty ?? true) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
),
|
||||
const SizedBox(
|
||||
height: 12,
|
||||
),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: FilledButton.icon(
|
||||
onPressed: () {
|
||||
if (formKey.currentState?.validate() ?? false) {
|
||||
onSubmit(
|
||||
uri_builder.assistantUri(
|
||||
prompt: textController.text,
|
||||
assistantMode: AssistantMode.values[tabController.index],
|
||||
researchVariant: researchVariant.value,
|
||||
chatModel: chatModel.value,
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
label: const Text('Submit'),
|
||||
icon: const Icon(MdiIcons.invoiceTextSend),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,247 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:flutter_material_design_icons/flutter_material_design_icons.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:kagi_bang_bang/features/kagi/domain/repositories/autosuggest.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/presentation/widgets/sheets/shared_content_sheet.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/utils/url_builder.dart'
|
||||
as uri_builder;
|
||||
import 'package:kagi_bang_bang/features/share_intent/domain/entities/shared_content.dart';
|
||||
import 'package:kagi_bang_bang/presentation/widgets/autocomplete.dart';
|
||||
import 'package:kagi_bang_bang/utils/ui_helper.dart' as ui_helper;
|
||||
import 'package:speech_to_text_google_dialog/speech_to_text_google_dialog.dart';
|
||||
|
||||
// The default Material-style Autocomplete options.
|
||||
class _AutocompleteOptions<T extends Object> extends StatelessWidget {
|
||||
const _AutocompleteOptions({
|
||||
super.key,
|
||||
required this.displayStringForOption,
|
||||
required this.onSelected,
|
||||
required this.openDirection,
|
||||
required this.options,
|
||||
required this.maxOptionsHeight,
|
||||
});
|
||||
|
||||
final AutocompleteOptionToString<T> displayStringForOption;
|
||||
|
||||
final AutocompleteOnSelected<T> onSelected;
|
||||
final OptionsViewOpenDirection openDirection;
|
||||
|
||||
final Iterable<T> options;
|
||||
final double maxOptionsHeight;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final AlignmentDirectional optionsAlignment = switch (openDirection) {
|
||||
OptionsViewOpenDirection.up => AlignmentDirectional.bottomStart,
|
||||
OptionsViewOpenDirection.down => AlignmentDirectional.topStart,
|
||||
};
|
||||
return Align(
|
||||
alignment: optionsAlignment,
|
||||
child: Material(
|
||||
elevation: 4.0,
|
||||
child: ConstrainedBox(
|
||||
constraints: BoxConstraints(maxHeight: maxOptionsHeight),
|
||||
child: ListView.builder(
|
||||
padding: EdgeInsets.zero,
|
||||
shrinkWrap: true,
|
||||
reverse: switch (openDirection) {
|
||||
OptionsViewOpenDirection.up => true,
|
||||
OptionsViewOpenDirection.down => false,
|
||||
},
|
||||
itemCount: options.length,
|
||||
itemBuilder: (BuildContext context, int index) {
|
||||
final T option = options.elementAt(index);
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
onSelected(option);
|
||||
},
|
||||
child: Builder(
|
||||
builder: (BuildContext context) {
|
||||
final bool highlight =
|
||||
AutocompleteHighlightedOption.of(context) == index;
|
||||
// if (highlight) {
|
||||
// SchedulerBinding.instance.addPostFrameCallback(
|
||||
// (Duration timeStamp) async {
|
||||
// await Scrollable.ensureVisible(
|
||||
// context,
|
||||
// alignment: 0.5,
|
||||
// );
|
||||
// },
|
||||
// debugLabel: 'AutocompleteOptions.ensureVisible',
|
||||
// );
|
||||
// }
|
||||
return Container(
|
||||
color: highlight ? Theme.of(context).focusColor : null,
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Text(displayStringForOption(option)),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class SearchTab extends HookConsumerWidget {
|
||||
final SharedContent? sharedContent;
|
||||
final OnSubmitUri onSubmit;
|
||||
|
||||
const SearchTab({
|
||||
required this.sharedContent,
|
||||
required this.onSubmit,
|
||||
super.key,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
useAutomaticKeepAlive();
|
||||
|
||||
final formKey = useMemoized(() => GlobalKey<FormState>());
|
||||
final focusNode = useFocusNode();
|
||||
final textController =
|
||||
useTextEditingController(text: sharedContent?.toString());
|
||||
final quickAnswer = useListenableSelector(
|
||||
textController,
|
||||
() => textController.text.endsWith('?'),
|
||||
);
|
||||
|
||||
return Form(
|
||||
key: formKey,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const SizedBox(height: 4),
|
||||
Consumer(
|
||||
builder: (context, ref, child) {
|
||||
final optionsStream = ref.watch(autosuggestRepositoryProvider);
|
||||
|
||||
return ExternalResultsAutocomplete<String>(
|
||||
textEditingController: textController,
|
||||
optionsStream: optionsStream,
|
||||
focusNode: focusNode,
|
||||
optionsViewOpenDirection: OptionsViewOpenDirection.up,
|
||||
displayStringForOption:
|
||||
// ignore: avoid_redundant_argument_values
|
||||
RawAutocomplete.defaultStringForOption,
|
||||
optionsViewBuilder: (context, onSelected, options) {
|
||||
return _AutocompleteOptions(
|
||||
//Must match RawAutocomplete parent
|
||||
displayStringForOption:
|
||||
RawAutocomplete.defaultStringForOption,
|
||||
onSelected: onSelected,
|
||||
options: options,
|
||||
//Must match RawAutocomplete parent
|
||||
openDirection: OptionsViewOpenDirection.up,
|
||||
maxOptionsHeight: 200.0,
|
||||
);
|
||||
},
|
||||
onTextChanged: (textEditingValue) {
|
||||
ref
|
||||
.read(autosuggestRepositoryProvider.notifier)
|
||||
.addQuery(textEditingValue.text);
|
||||
},
|
||||
fieldViewBuilder: (
|
||||
context,
|
||||
textEditingController,
|
||||
focusNode,
|
||||
onFieldSubmitted,
|
||||
) {
|
||||
return TextFormField(
|
||||
controller: textEditingController,
|
||||
focusNode: focusNode,
|
||||
decoration: InputDecoration(
|
||||
// border: OutlineInputBorder(),
|
||||
label: const Text('Query'),
|
||||
suffixIcon: IconButton(
|
||||
onPressed: () async {
|
||||
final isServiceAvailable =
|
||||
await SpeechToTextGoogleDialog.getInstance()
|
||||
.showGoogleDialog(
|
||||
onTextReceived: (data) {
|
||||
textEditingController.text = data.toString();
|
||||
},
|
||||
// locale: "en-US",
|
||||
);
|
||||
|
||||
if (!isServiceAvailable) {
|
||||
if (context.mounted) {
|
||||
ui_helper.showErrorMessage(
|
||||
context,
|
||||
'Service is not available',
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
icon: const Icon(Icons.mic),
|
||||
),
|
||||
),
|
||||
autovalidateMode: AutovalidateMode.onUserInteraction,
|
||||
validator: (value) {
|
||||
if (value?.isEmpty ?? true) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
onTapOutside: (event) {
|
||||
focusNode.unfocus();
|
||||
},
|
||||
onFieldSubmitted: (value) {
|
||||
if (formKey.currentState?.validate() ?? false) {
|
||||
onSubmit(
|
||||
uri_builder.searchUri(
|
||||
searchQuery: textController.text,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// onFieldSubmitted();
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
SwitchListTile(
|
||||
value: quickAnswer,
|
||||
onChanged: (_) {
|
||||
if (textController.text.endsWith('?')) {
|
||||
textController.text = textController.text
|
||||
.substring(0, textController.text.length - 1);
|
||||
} else {
|
||||
textController.text = '${textController.text}?';
|
||||
}
|
||||
},
|
||||
contentPadding: EdgeInsets.zero,
|
||||
title: const Text('Quick Answer'),
|
||||
secondary: const Icon(MdiIcons.lightningBolt),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 12,
|
||||
),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: FilledButton.icon(
|
||||
onPressed: () {
|
||||
if (formKey.currentState?.validate() ?? false) {
|
||||
onSubmit(
|
||||
uri_builder.searchUri(
|
||||
searchQuery: textController.text,
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
label: const Text('Search'),
|
||||
icon: const Icon(MdiIcons.invoiceTextSend),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:flutter_material_design_icons/flutter_material_design_icons.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/domain/entities/modes.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/presentation/widgets/sheets/shared_content_sheet.dart';
|
||||
import 'package:kagi_bang_bang/features/search_browser/utils/url_builder.dart'
|
||||
as uri_builder;
|
||||
import 'package:kagi_bang_bang/features/share_intent/domain/entities/shared_content.dart';
|
||||
import 'package:kagi_bang_bang/presentation/widgets/website_title_tile.dart';
|
||||
import 'package:kagi_bang_bang/utils/uri_parser.dart' as uri_parser;
|
||||
|
||||
class SummarizeTab extends HookConsumerWidget {
|
||||
final SharedContent? sharedContent;
|
||||
final OnSubmitUri onSubmit;
|
||||
|
||||
const SummarizeTab({
|
||||
required this.sharedContent,
|
||||
required this.onSubmit,
|
||||
super.key,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
useAutomaticKeepAlive();
|
||||
|
||||
final formKey = useMemoized(() => GlobalKey<FormState>());
|
||||
final selectedMode = useState(SummarizerMode.keyMoments);
|
||||
final textController =
|
||||
useTextEditingController(text: sharedContent?.toString());
|
||||
|
||||
return Form(
|
||||
key: formKey,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
SegmentedButton<SummarizerMode>(
|
||||
segments: const [
|
||||
ButtonSegment(
|
||||
value: SummarizerMode.keyMoments,
|
||||
icon: Icon(MdiIcons.scriptTextKey),
|
||||
label: Text('Key Moments'),
|
||||
),
|
||||
ButtonSegment(
|
||||
value: SummarizerMode.summary,
|
||||
icon: Icon(MdiIcons.invoiceTextMinus),
|
||||
label: Text('Summary'),
|
||||
),
|
||||
],
|
||||
selected: {selectedMode.value},
|
||||
onSelectionChanged: (value) {
|
||||
selectedMode.value = value.first;
|
||||
},
|
||||
),
|
||||
const SizedBox(
|
||||
height: 12,
|
||||
),
|
||||
...switch (sharedContent) {
|
||||
SharedUrl() => [
|
||||
TextFormField(
|
||||
controller: textController,
|
||||
decoration: const InputDecoration(
|
||||
// border: OutlineInputBorder(),
|
||||
label: Text('Document'),
|
||||
),
|
||||
autovalidateMode: AutovalidateMode.onUserInteraction,
|
||||
validator: (value) {
|
||||
if (value?.isEmpty ?? true) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
),
|
||||
HookBuilder(
|
||||
builder: (context) {
|
||||
final url =
|
||||
useState(uri_parser.tryParseUrl(textController.text));
|
||||
useEffect(
|
||||
() {
|
||||
Timer? timer;
|
||||
void debounce() {
|
||||
timer?.cancel();
|
||||
timer = Timer(const Duration(milliseconds: 250), () {
|
||||
url.value =
|
||||
uri_parser.tryParseUrl(textController.text);
|
||||
});
|
||||
}
|
||||
|
||||
textController.addListener(debounce);
|
||||
return () => textController.removeListener(debounce);
|
||||
},
|
||||
[textController],
|
||||
);
|
||||
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (url.value != null) WebsiteTitleTile(url.value!),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
const SizedBox(
|
||||
height: 12,
|
||||
),
|
||||
],
|
||||
SharedText() || null => [
|
||||
TextFormField(
|
||||
controller: textController,
|
||||
decoration: const InputDecoration(
|
||||
// border: OutlineInputBorder(),
|
||||
label: Text('Document'),
|
||||
),
|
||||
maxLines: null,
|
||||
autovalidateMode: AutovalidateMode.onUserInteraction,
|
||||
validator: (value) {
|
||||
if (value?.isEmpty ?? true) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
),
|
||||
const SizedBox(
|
||||
height: 12,
|
||||
),
|
||||
],
|
||||
},
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: FilledButton.icon(
|
||||
onPressed: () {
|
||||
if (formKey.currentState?.validate() ?? false) {
|
||||
onSubmit(
|
||||
uri_builder.summarizerUri(
|
||||
document: SharedContent.parse(textController.text),
|
||||
mode: selectedMode.value,
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
label: const Text('Summarize'),
|
||||
icon: const Icon(MdiIcons.invoiceTextSend),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:kagi_bang_bang/features/web_view/domain/repositories/web_view.dart';
|
||||
|
||||
class TabsActionButton extends HookConsumerWidget {
|
||||
final VoidCallback onTap;
|
||||
|
||||
const TabsActionButton({required this.onTap, super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final tabCount =
|
||||
ref.watch(webViewRepositoryProvider.select((tabs) => tabs.length));
|
||||
|
||||
return InkWell(
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 10.0,
|
||||
top: 15.0,
|
||||
right: 10.0,
|
||||
bottom: 15.0,
|
||||
),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(width: 2.0, color: Colors.white),
|
||||
borderRadius: BorderRadius.circular(5.0),
|
||||
),
|
||||
constraints: const BoxConstraints(minWidth: 25.0),
|
||||
child: Center(
|
||||
child: Text(
|
||||
tabCount.toString(),
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 14.0,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user