first implementation finished
This commit is contained in:
Fabian Freund
@@ -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),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user