Compare commits

...

2 Commits

Author SHA1 Message Date
4b32b65d1c Think with messages 2025-10-27 00:23:35 +08:00
50ac7109bb 💄 Optimize thinking 2025-10-26 23:16:05 +08:00
5 changed files with 938 additions and 1249 deletions

View File

@@ -34,6 +34,7 @@ import "package:island/widgets/chat/call_button.dart";
import "package:island/widgets/chat/chat_input.dart";
import "package:island/widgets/chat/chat_link_attachments.dart";
import "package:island/widgets/chat/public_room_preview.dart";
import "package:island/screens/thought/think_sheet.dart";
class ChatRoomScreen extends HookConsumerWidget {
final String id;
@@ -145,6 +146,10 @@ class ChatRoomScreen extends HookConsumerWidget {
final attachments = useState<List<UniversalFile>>([]);
final attachmentProgress = useState<Map<String, Map<int, double>>>({});
// Selection mode state
final isSelectionMode = useState<bool>(false);
final selectedMessages = useState<Set<String>>({});
var isLoading = false;
var isScrollingToMessage = false; // Flag to prevent scroll conflicts
@@ -284,6 +289,53 @@ class ChatRoomScreen extends HookConsumerWidget {
return () => messageController.removeListener(onTextChange);
}, [messageController]);
// Selection functions
void toggleSelectionMode() {
isSelectionMode.value = !isSelectionMode.value;
if (!isSelectionMode.value) {
selectedMessages.value = {};
}
}
void toggleMessageSelection(String messageId) {
final newSelection = Set<String>.from(selectedMessages.value);
if (newSelection.contains(messageId)) {
newSelection.remove(messageId);
} else {
newSelection.add(messageId);
}
selectedMessages.value = newSelection;
}
void openThinkingSheet() {
if (selectedMessages.value.isEmpty) return;
// Convert selected message IDs to message data
final selectedMessageData =
messages.valueOrNull
?.where((msg) => selectedMessages.value.contains(msg.id))
.map(
(msg) => {
'id': msg.id,
'content': msg.content,
'senderId': msg.senderId,
'createdAt': msg.createdAt.toIso8601String(),
'attachments': msg.attachments,
},
)
.toList() ??
[];
ThoughtSheet.show(
context,
attachedMessages: selectedMessageData,
attachedPosts: [], // Could be extended to include posts
);
// Exit selection mode after opening
toggleSelectionMode();
}
final compactHeader = isWideScreen(context);
Widget onlineIndicator() => Row(
@@ -571,42 +623,106 @@ class ChatRoomScreen extends HookConsumerWidget {
final messageWidget = chatIdentity.when(
skipError: true,
data:
(identity) => MessageItem(
key: settings.disableAnimation ? key : null,
message: message,
isCurrentUser: identity?.id == message.senderId,
onAction: (action) {
switch (action) {
case MessageItemAction.delete:
messagesNotifier.deleteMessage(message.id);
case MessageItemAction.edit:
messageEditingTo.value = message.toRemoteMessage();
messageController.text =
messageEditingTo.value?.content ?? '';
attachments.value =
messageEditingTo.value!.attachments
.map((e) => UniversalFile.fromAttachment(e))
.toList();
case MessageItemAction.forward:
messageForwardingTo.value = message.toRemoteMessage();
case MessageItemAction.reply:
messageReplyingTo.value = message.toRemoteMessage();
case MessageItemAction.resend:
messagesNotifier.retryMessage(message.id);
(identity) => GestureDetector(
onLongPress: () {
if (!isSelectionMode.value) {
toggleSelectionMode();
toggleMessageSelection(message.id);
}
},
onJump: (messageId) {
scrollToMessage(
messageId: messageId,
messageList: messageList,
messagesNotifier: messagesNotifier,
listController: listController,
scrollController: scrollController,
ref: ref,
);
onTap: () {
if (isSelectionMode.value) {
toggleMessageSelection(message.id);
}
},
progress: attachmentProgress.value[message.id],
showAvatar: isLastInGroup,
child: Container(
color:
selectedMessages.value.contains(message.id)
? Theme.of(
context,
).colorScheme.primaryContainer.withOpacity(0.3)
: null,
child: Stack(
children: [
MessageItem(
key: settings.disableAnimation ? key : null,
message: message,
isCurrentUser: identity?.id == message.senderId,
onAction:
isSelectionMode.value
? null
: (action) {
switch (action) {
case MessageItemAction.delete:
messagesNotifier.deleteMessage(
message.id,
);
case MessageItemAction.edit:
messageEditingTo.value =
message.toRemoteMessage();
messageController.text =
messageEditingTo.value?.content ?? '';
attachments.value =
messageEditingTo.value!.attachments
.map(
(e) =>
UniversalFile.fromAttachment(
e,
),
)
.toList();
case MessageItemAction.forward:
messageForwardingTo.value =
message.toRemoteMessage();
case MessageItemAction.reply:
messageReplyingTo.value =
message.toRemoteMessage();
case MessageItemAction.resend:
messagesNotifier.retryMessage(message.id);
}
},
onJump: (messageId) {
scrollToMessage(
messageId: messageId,
messageList: messageList,
messagesNotifier: messagesNotifier,
listController: listController,
scrollController: scrollController,
ref: ref,
);
},
progress: attachmentProgress.value[message.id],
showAvatar: isLastInGroup,
isSelectionMode: isSelectionMode.value,
isSelected: selectedMessages.value.contains(message.id),
onToggleSelection: toggleMessageSelection,
onEnterSelectionMode: () {
if (!isSelectionMode.value) {
toggleSelectionMode();
}
},
),
if (selectedMessages.value.contains(message.id))
Positioned(
top: 8,
right: 8,
child: Container(
width: 24,
height: 24,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primary,
shape: BoxShape.circle,
),
child: Icon(
Icons.check,
size: 16,
color: Theme.of(context).colorScheme.onPrimary,
),
),
),
],
),
),
),
loading:
() => MessageItem(
@@ -756,71 +872,73 @@ class ChatRoomScreen extends HookConsumerWidget {
),
),
),
chatRoom.when(
data:
(room) => Column(
mainAxisSize: MainAxisSize.min,
children: [
ChatInput(
messageController: messageController,
chatRoom: room!,
onSend: sendMessage,
onClear: () {
if (messageEditingTo.value != null) {
attachments.value.clear();
messageController.clear();
}
messageEditingTo.value = null;
messageReplyingTo.value = null;
messageForwardingTo.value = null;
},
messageEditingTo: messageEditingTo.value,
messageReplyingTo: messageReplyingTo.value,
messageForwardingTo: messageForwardingTo.value,
onPickFile: (bool isPhoto) {
if (isPhoto) {
pickPhotoMedia();
} else {
pickVideoMedia();
}
},
onPickAudio: pickAudioMedia,
onPickGeneralFile: pickGeneralFile,
onLinkAttachment: linkAttachment,
attachments: attachments.value,
onUploadAttachment: uploadAttachment,
onDeleteAttachment: (index) async {
final attachment = attachments.value[index];
if (attachment.isOnCloud && !attachment.isLink) {
final client = ref.watch(apiClientProvider);
await client.delete(
'/drive/files/${attachment.data.id}',
);
}
final clone = List.of(attachments.value);
clone.removeAt(index);
attachments.value = clone;
},
onMoveAttachment: (idx, delta) {
if (idx + delta < 0 ||
idx + delta >= attachments.value.length) {
return;
}
final clone = List.of(attachments.value);
clone.insert(idx + delta, clone.removeAt(idx));
attachments.value = clone;
},
onAttachmentsChanged: (newAttachments) {
attachments.value = newAttachments;
},
attachmentProgress: attachmentProgress.value,
),
Gap(MediaQuery.of(context).padding.bottom),
],
),
error: (_, _) => const SizedBox.shrink(),
loading: () => const SizedBox.shrink(),
),
if (!isSelectionMode.value)
chatRoom.when(
data:
(room) => Column(
mainAxisSize: MainAxisSize.min,
children: [
ChatInput(
messageController: messageController,
chatRoom: room!,
onSend: sendMessage,
onClear: () {
if (messageEditingTo.value != null) {
attachments.value.clear();
messageController.clear();
}
messageEditingTo.value = null;
messageReplyingTo.value = null;
messageForwardingTo.value = null;
},
messageEditingTo: messageEditingTo.value,
messageReplyingTo: messageReplyingTo.value,
messageForwardingTo: messageForwardingTo.value,
onPickFile: (bool isPhoto) {
if (isPhoto) {
pickPhotoMedia();
} else {
pickVideoMedia();
}
},
onPickAudio: pickAudioMedia,
onPickGeneralFile: pickGeneralFile,
onLinkAttachment: linkAttachment,
attachments: attachments.value,
onUploadAttachment: uploadAttachment,
onDeleteAttachment: (index) async {
final attachment = attachments.value[index];
if (attachment.isOnCloud &&
!attachment.isLink) {
final client = ref.watch(apiClientProvider);
await client.delete(
'/drive/files/${attachment.data.id}',
);
}
final clone = List.of(attachments.value);
clone.removeAt(index);
attachments.value = clone;
},
onMoveAttachment: (idx, delta) {
if (idx + delta < 0 ||
idx + delta >= attachments.value.length) {
return;
}
final clone = List.of(attachments.value);
clone.insert(idx + delta, clone.removeAt(idx));
attachments.value = clone;
},
onAttachmentsChanged: (newAttachments) {
attachments.value = newAttachments;
},
attachmentProgress: attachmentProgress.value,
),
Gap(MediaQuery.of(context).padding.bottom),
],
),
error: (_, _) => const SizedBox.shrink(),
loading: () => const SizedBox.shrink(),
),
],
),
),
@@ -859,6 +977,43 @@ class ChatRoomScreen extends HookConsumerWidget {
),
),
),
// Selection mode toolbar
if (isSelectionMode.value)
Positioned(
left: 0,
right: 0,
bottom: 0,
child: Container(
color: Theme.of(context).colorScheme.surface,
padding: EdgeInsets.only(
left: 16,
right: 16,
top: 8,
bottom: MediaQuery.of(context).padding.bottom + 8,
),
child: Row(
children: [
IconButton(
icon: const Icon(Icons.close),
onPressed: toggleSelectionMode,
tooltip: 'Cancel selection',
),
const SizedBox(width: 8),
Text(
'${selectedMessages.value.length} selected',
style: Theme.of(context).textTheme.titleMedium,
),
const Spacer(),
if (selectedMessages.value.isNotEmpty)
FilledButton.icon(
onPressed: openThinkingSheet,
icon: Icon(Symbols.smart_toy),
label: const Text('AI Think'),
),
],
),
),
),
],
),
);

View File

@@ -2,28 +2,20 @@ import "dart:convert";
import "package:dio/dio.dart";
import "package:easy_localization/easy_localization.dart";
import "package:flutter/material.dart";
import "package:flutter/services.dart";
import "package:flutter_hooks/flutter_hooks.dart";
import "package:gap/gap.dart";
import "package:google_fonts/google_fonts.dart";
import "package:riverpod_annotation/riverpod_annotation.dart";
import "package:hooks_riverpod/hooks_riverpod.dart";
import "package:island/models/thought.dart";
import "package:island/pods/network.dart";
import "package:island/pods/userinfo.dart";
import "package:island/services/time.dart";
import "package:island/widgets/alert.dart";
import "package:island/widgets/app_scaffold.dart";
import "package:island/widgets/content/markdown.dart";
import "package:island/widgets/post/compose_dialog.dart";
import "package:island/widgets/response.dart";
import "package:island/widgets/thought/thought_sequence_list.dart";
import "package:island/screens/posts/compose.dart";
import "package:island/widgets/thought/shared_widgets.dart";
import "package:material_symbols_icons/material_symbols_icons.dart";
import "package:styled_widget/styled_widget.dart";
import "package:super_sliver_list/super_sliver_list.dart";
import "package:markdown/markdown.dart" as markdown;
import "package:markdown_widget/markdown_widget.dart";
import "package:collection/collection.dart";
part 'think.g.dart';
@@ -47,38 +39,6 @@ class ThoughtScreen extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
// Extract proposals from text content
List<Map<String, String>> extractProposals(String content) {
final proposalRegex = RegExp(
r'<proposal\s+type="([^"]+)">(.*?)<\/proposal>',
dotAll: true,
);
final matches = proposalRegex.allMatches(content);
return matches.map((match) {
return {'type': match.group(1)!, 'content': match.group(2)!};
}).toList();
}
void handleProposalAction(
BuildContext context,
Map<String, String> proposal,
) {
switch (proposal['type']) {
case 'post_create':
// Show post creation dialog with the proposal content
PostComposeDialog.show(
context,
initialState: PostComposeInitialState(
content: (proposal['content'] ?? '').trim(),
),
);
break;
default:
// Show a snackbar for unsupported proposal types
showSnackBar('Unsupported proposal type: ${proposal['type']}');
}
}
final selectedSequenceId = useState<String?>(null);
final thoughts =
selectedSequenceId.value != null
@@ -261,370 +221,6 @@ class ThoughtScreen extends HookConsumerWidget {
}
}
Widget buildChunkTiles(List<SnThinkingChunk> chunks) {
return Column(
children: [
...chunks
.where((chunk) => chunk.type == ThinkingChunkType.reasoning)
.map(
(chunk) => Card(
margin: const EdgeInsets.only(bottom: 8),
child: Theme(
data: Theme.of(
context,
).copyWith(dividerColor: Colors.transparent),
child: ExpansionTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
title: Text(
'Reasoning',
style: Theme.of(context).textTheme.titleSmall,
),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
chunk.data?['content'] ?? '',
style: Theme.of(context).textTheme.bodyMedium,
),
),
],
),
),
),
),
...chunks
.where((chunk) => chunk.type == ThinkingChunkType.functionCall)
.map(
(chunk) => Card(
margin: const EdgeInsets.only(bottom: 8),
child: Theme(
data: Theme.of(
context,
).copyWith(dividerColor: Colors.transparent),
child: ExpansionTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
visualDensity: VisualDensity.compact,
title: Text(
'Function Call',
style: Theme.of(context).textTheme.titleSmall,
),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SelectableText(
JsonEncoder.withIndent(' ').convert(chunk.data),
style: GoogleFonts.robotoMono(),
),
),
],
),
),
),
),
],
);
}
Widget thoughtItem(SnThinkingThought thought, int index) {
final key = Key('thought-${thought.id}');
// Extract proposals from thought content
final proposals =
thought.content != null ? extractProposals(thought.content!) : [];
final thoughtWidget = Container(
margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color:
thought.role == ThinkingThoughtRole.assistant
? Theme.of(context).colorScheme.surfaceContainerHighest
: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(12),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
thought.role == ThinkingThoughtRole.assistant
? Symbols.smart_toy
: Symbols.person,
size: 20,
),
const Gap(8),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.ideographic,
spacing: 8,
children: [
Text(
thought.role == ThinkingThoughtRole.assistant
? 'thoughtAiName'.tr()
: 'thoughtUserName'.tr(),
style: Theme.of(context).textTheme.titleSmall,
),
Tooltip(
message: thought.createdAt.formatSystem(),
child: Text(
thought.createdAt.formatRelative(context),
style: Theme.of(
context,
).textTheme.bodySmall?.copyWith(
color:
Theme.of(context).colorScheme.onSurfaceVariant,
),
),
),
],
),
),
if (thought.role == ThinkingThoughtRole.assistant)
SizedBox(
height: 20,
width: 20,
child: IconButton(
visualDensity: VisualDensity(
horizontal: -4,
vertical: -4,
),
padding: EdgeInsets.zero,
iconSize: 16,
icon: Icon(Symbols.content_copy),
onPressed: () {
Clipboard.setData(
ClipboardData(text: thought.content ?? ''),
);
showSnackBar('copiedToClipboard'.tr());
},
),
),
],
),
const Gap(8),
if (thought.chunks.isNotEmpty) ...[
buildChunkTiles(thought.chunks),
const Gap(8),
],
if (thought.content != null)
MarkdownTextContent(
isSelectable: true,
content: thought.content!,
extraBlockSyntaxList: [ProposalBlockSyntax()],
textStyle: Theme.of(context).textTheme.bodyMedium,
extraGenerators: [
ProposalGenerator(
backgroundColor:
Theme.of(context).colorScheme.secondaryContainer,
foregroundColor:
Theme.of(context).colorScheme.onSecondaryContainer,
borderColor: Theme.of(context).colorScheme.outline,
),
],
),
if (thought.role == ThinkingThoughtRole.assistant &&
(thought.tokenCount != null || thought.modelName != null)) ...[
const Gap(8),
Row(
children: [
if (thought.modelName != null) ...[
const Icon(Symbols.neurology, size: 16),
const Gap(4),
Text(
'${thought.modelName}',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
const Gap(16),
],
if (thought.tokenCount != null)
...([
const Icon(Symbols.token, size: 16),
const Gap(4),
Text(
'${thought.tokenCount} tokens',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
]),
],
),
],
if (proposals.isNotEmpty &&
thought.role == ThinkingThoughtRole.assistant) ...[
const Gap(12),
Wrap(
spacing: 8,
runSpacing: 8,
children:
proposals.map((proposal) {
return ElevatedButton.icon(
onPressed:
() => handleProposalAction(context, proposal),
icon: Icon(switch (proposal['type']) {
'post_create' => Symbols.add,
_ => Symbols.lightbulb,
}, size: 16),
label: Text(switch (proposal['type']) {
'post_create' => 'Create Post',
_ => proposal['type'] ?? 'Action',
}),
style: ElevatedButton.styleFrom(
backgroundColor:
Theme.of(context).colorScheme.primaryContainer,
foregroundColor:
Theme.of(context).colorScheme.onPrimaryContainer,
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 8,
),
),
);
}).toList(),
),
],
],
),
);
return TweenAnimationBuilder<double>(
key: key,
tween: Tween<double>(begin: 0.0, end: 1.0),
duration: Duration(
milliseconds: 400 + (index % 5) * 50,
), // Staggered delay
curve: Curves.easeOutCubic,
builder: (context, animationValue, child) {
return Transform.translate(
offset: Offset(
0,
20 * (1 - animationValue),
), // Slide up from bottom
child: Opacity(opacity: animationValue, child: child),
);
},
child: thoughtWidget,
);
}
Widget streamingThoughtItem() => Container(
margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(12),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(Symbols.smart_toy, size: 20),
const Gap(8),
Text(
'thoughtAiName'.tr(),
style: Theme.of(context).textTheme.titleSmall,
),
const Spacer(),
SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(strokeWidth: 2),
),
],
),
const Gap(8),
MarkdownTextContent(
content: streamingText.value,
textStyle: Theme.of(context).textTheme.bodyMedium,
extraBlockSyntaxList: [ProposalBlockSyntax()],
extraGenerators: [
ProposalGenerator(
backgroundColor:
Theme.of(context).colorScheme.secondaryContainer,
foregroundColor:
Theme.of(context).colorScheme.onSecondaryContainer,
borderColor: Theme.of(context).colorScheme.outline,
),
],
),
if (reasoningChunks.value.isNotEmpty ||
functionCalls.value.isNotEmpty) ...[
const Gap(8),
Column(
children: [
...reasoningChunks.value.map(
(chunk) => Card(
margin: const EdgeInsets.only(bottom: 8),
child: Theme(
data: Theme.of(
context,
).copyWith(dividerColor: Colors.transparent),
child: ExpansionTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
title: Text(
'Reasoning',
style: Theme.of(context).textTheme.titleSmall,
),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
chunk,
style: Theme.of(context).textTheme.bodyMedium,
),
),
],
),
),
),
),
...functionCalls.value.map(
(call) => Card(
margin: const EdgeInsets.only(bottom: 8),
child: Theme(
data: Theme.of(
context,
).copyWith(dividerColor: Colors.transparent),
child: ExpansionTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
visualDensity: VisualDensity.compact,
title: Text(
'Function Call',
style: Theme.of(context).textTheme.titleSmall,
),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SelectableText(
call,
style: GoogleFonts.robotoMono(),
),
),
],
),
),
),
),
],
),
],
],
),
);
return AppScaffold(
isNoBackground: false,
appBar: AppBar(
@@ -680,12 +276,17 @@ class ThoughtScreen extends HookConsumerWidget {
(isStreaming.value ? 1 : 0),
itemBuilder: (context, index) {
if (isStreaming.value && index == 0) {
return streamingThoughtItem();
return streamingThoughtItem(
streamingText.value,
reasoningChunks.value,
functionCalls.value,
context,
);
}
final thoughtIndex =
isStreaming.value ? index - 1 : index;
final thought = localThoughts.value[thoughtIndex];
return thoughtItem(thought, thoughtIndex);
return thoughtItem(thought, thoughtIndex, context);
},
),
loading:
@@ -765,135 +366,3 @@ class ThoughtScreen extends HookConsumerWidget {
);
}
}
class ProposalBlockSyntax extends markdown.BlockSyntax {
@override
RegExp get pattern => RegExp(r'^<proposal', caseSensitive: false);
@override
bool canParse(markdown.BlockParser parser) {
return pattern.hasMatch(parser.current.content);
}
@override
bool canEndBlock(markdown.BlockParser parser) {
return parser.current.content.contains('</proposal>');
}
@override
markdown.Node parse(markdown.BlockParser parser) {
final childLines = <String>[];
// Extract type from opening tag
final openingLine = parser.current.content;
final attrsMatch = RegExp(
r'<proposal(\s[^>]*)?>',
caseSensitive: false,
).firstMatch(openingLine);
final attrs = attrsMatch?.group(1) ?? '';
final typeMatch = RegExp(r'type="([^"]*)"').firstMatch(attrs);
final type = typeMatch?.group(1) ?? '';
// Collect all lines until closing tag
while (!parser.isDone) {
childLines.add(parser.current.content);
if (canEndBlock(parser)) {
parser.advance();
break;
}
parser.advance();
}
// Extract content between tags
final fullContent = childLines.join('\n');
final contentMatch = RegExp(
r'<proposal[^>]*>(.*?)</proposal>',
dotAll: true,
caseSensitive: false,
).firstMatch(fullContent);
final content = contentMatch?.group(1)?.trim() ?? '';
final element = markdown.Element('proposal', [markdown.Text(content)])
..attributes['type'] = type;
return element;
}
}
class ProposalGenerator extends SpanNodeGeneratorWithTag {
ProposalGenerator({
required Color backgroundColor,
required Color foregroundColor,
required Color borderColor,
}) : super(
tag: 'proposal',
generator: (
markdown.Element element,
MarkdownConfig config,
WidgetVisitor visitor,
) {
return ProposalSpanNode(
text: element.textContent,
type: element.attributes['type'] ?? '',
backgroundColor: backgroundColor,
foregroundColor: foregroundColor,
borderColor: borderColor,
);
},
);
}
class ProposalSpanNode extends SpanNode {
final String text;
final String type;
final Color backgroundColor;
final Color foregroundColor;
final Color borderColor;
ProposalSpanNode({
required this.text,
required this.type,
required this.backgroundColor,
required this.foregroundColor,
required this.borderColor,
});
@override
InlineSpan build() {
return WidgetSpan(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: backgroundColor,
border: Border.all(color: borderColor, width: 1),
borderRadius: BorderRadius.circular(8),
),
child: Column(
mainAxisSize: MainAxisSize.min,
spacing: 6,
children: [
Row(
spacing: 6,
children: [
Icon(Symbols.lightbulb, size: 16, color: foregroundColor),
Text(
'SN-chan suggest you to ${type.split('_').reversed.join(' ')}',
).fontSize(13).opacity(0.8),
],
).padding(top: 3, bottom: 4),
Flexible(
child: Text(
text,
style: TextStyle(
color: foregroundColor,
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
),
],
),
),
);
}
}

View File

@@ -2,25 +2,17 @@ import "dart:convert";
import "package:dio/dio.dart";
import "package:easy_localization/easy_localization.dart";
import "package:flutter/material.dart";
import "package:flutter/services.dart";
import "package:flutter_hooks/flutter_hooks.dart";
import "package:gap/gap.dart";
import "package:google_fonts/google_fonts.dart";
import "package:hooks_riverpod/hooks_riverpod.dart";
import "package:island/models/thought.dart";
import "package:island/pods/network.dart";
import "package:island/pods/userinfo.dart";
import "package:island/services/time.dart";
import "package:island/widgets/alert.dart";
import "package:island/widgets/content/markdown.dart";
import "package:island/widgets/content/sheet.dart";
import "package:island/widgets/post/compose_dialog.dart";
import "package:island/screens/posts/compose.dart";
import "package:island/widgets/thought/shared_widgets.dart";
import "package:material_symbols_icons/material_symbols_icons.dart";
import "package:styled_widget/styled_widget.dart";
import "package:super_sliver_list/super_sliver_list.dart";
import "package:markdown/markdown.dart" as markdown;
import "package:markdown_widget/markdown_widget.dart";
class ThoughtSheet extends HookConsumerWidget {
final List<Map<String, dynamic>> attachedMessages;
@@ -51,38 +43,6 @@ class ThoughtSheet extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
// Extract proposals from text content
List<Map<String, String>> extractProposals(String content) {
final proposalRegex = RegExp(
r'<proposal\s+type="([^"]+)">(.*?)<\/proposal>',
dotAll: true,
);
final matches = proposalRegex.allMatches(content);
return matches.map((match) {
return {'type': match.group(1)!, 'content': match.group(2)!};
}).toList();
}
void handleProposalAction(
BuildContext context,
Map<String, String> proposal,
) {
switch (proposal['type']) {
case 'post_create':
// Show post creation dialog with the proposal content
PostComposeDialog.show(
context,
initialState: PostComposeInitialState(
content: (proposal['content'] ?? '').trim(),
),
);
break;
default:
// Show a snackbar for unsupported proposal types
showSnackBar('Unsupported proposal type: ${proposal['type']}');
}
}
final localThoughts = useState<List<SnThinkingThought>>([]);
final currentTopic = useState<String?>('aiThought'.tr());
@@ -231,370 +191,6 @@ class ThoughtSheet extends HookConsumerWidget {
}
}
Widget buildChunkTiles(List<SnThinkingChunk> chunks) {
return Column(
children: [
...chunks
.where((chunk) => chunk.type == ThinkingChunkType.reasoning)
.map(
(chunk) => Card(
margin: const EdgeInsets.only(bottom: 8),
child: Theme(
data: Theme.of(
context,
).copyWith(dividerColor: Colors.transparent),
child: ExpansionTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
title: Text(
'Reasoning',
style: Theme.of(context).textTheme.titleSmall,
),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
chunk.data?['content'] ?? '',
style: Theme.of(context).textTheme.bodyMedium,
),
),
],
),
),
),
),
...chunks
.where((chunk) => chunk.type == ThinkingChunkType.functionCall)
.map(
(chunk) => Card(
margin: const EdgeInsets.only(bottom: 8),
child: Theme(
data: Theme.of(
context,
).copyWith(dividerColor: Colors.transparent),
child: ExpansionTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
visualDensity: VisualDensity.compact,
title: Text(
'Function Call',
style: Theme.of(context).textTheme.titleSmall,
),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SelectableText(
JsonEncoder.withIndent(' ').convert(chunk.data),
style: GoogleFonts.robotoMono(),
),
),
],
),
),
),
),
],
);
}
Widget thoughtItem(SnThinkingThought thought, int index) {
final key = Key('thought-${thought.id}');
// Extract proposals from thought content
final proposals =
thought.content != null ? extractProposals(thought.content!) : [];
final thoughtWidget = Container(
margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color:
thought.role == ThinkingThoughtRole.assistant
? Theme.of(context).colorScheme.surfaceContainerHighest
: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(12),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
thought.role == ThinkingThoughtRole.assistant
? Symbols.smart_toy
: Symbols.person,
size: 20,
),
const Gap(8),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.ideographic,
spacing: 8,
children: [
Text(
thought.role == ThinkingThoughtRole.assistant
? 'thoughtAiName'.tr()
: 'thoughtUserName'.tr(),
style: Theme.of(context).textTheme.titleSmall,
),
Tooltip(
message: thought.createdAt.formatSystem(),
child: Text(
thought.createdAt.formatRelative(context),
style: Theme.of(
context,
).textTheme.bodySmall?.copyWith(
color:
Theme.of(context).colorScheme.onSurfaceVariant,
),
),
),
],
),
),
if (thought.role == ThinkingThoughtRole.assistant)
SizedBox(
height: 20,
width: 20,
child: IconButton(
visualDensity: VisualDensity(
horizontal: -4,
vertical: -4,
),
padding: EdgeInsets.zero,
iconSize: 16,
icon: Icon(Symbols.content_copy),
onPressed: () {
Clipboard.setData(
ClipboardData(text: thought.content ?? ''),
);
showSnackBar('copiedToClipboard'.tr());
},
),
),
],
),
const Gap(8),
if (thought.chunks.isNotEmpty) ...[
buildChunkTiles(thought.chunks),
const Gap(8),
],
if (thought.content != null)
MarkdownTextContent(
isSelectable: true,
content: thought.content!,
extraBlockSyntaxList: [ProposalBlockSyntax()],
textStyle: Theme.of(context).textTheme.bodyMedium,
extraGenerators: [
ProposalGenerator(
backgroundColor:
Theme.of(context).colorScheme.secondaryContainer,
foregroundColor:
Theme.of(context).colorScheme.onSecondaryContainer,
borderColor: Theme.of(context).colorScheme.outline,
),
],
),
if (thought.role == ThinkingThoughtRole.assistant &&
(thought.tokenCount != null || thought.modelName != null)) ...[
const Gap(8),
Row(
children: [
if (thought.modelName != null) ...[
const Icon(Symbols.neurology, size: 16),
const Gap(4),
Text(
'${thought.modelName}',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
const Gap(16),
],
if (thought.tokenCount != null)
...([
const Icon(Symbols.token, size: 16),
const Gap(4),
Text(
'${thought.tokenCount} tokens',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
]),
],
),
],
if (proposals.isNotEmpty &&
thought.role == ThinkingThoughtRole.assistant) ...[
const Gap(12),
Wrap(
spacing: 8,
runSpacing: 8,
children:
proposals.map((proposal) {
return ElevatedButton.icon(
onPressed:
() => handleProposalAction(context, proposal),
icon: Icon(switch (proposal['type']) {
'post_create' => Symbols.add,
_ => Symbols.lightbulb,
}, size: 16),
label: Text(switch (proposal['type']) {
'post_create' => 'Create Post',
_ => proposal['type'] ?? 'Action',
}),
style: ElevatedButton.styleFrom(
backgroundColor:
Theme.of(context).colorScheme.primaryContainer,
foregroundColor:
Theme.of(context).colorScheme.onPrimaryContainer,
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 8,
),
),
);
}).toList(),
),
],
],
),
);
return TweenAnimationBuilder<double>(
key: key,
tween: Tween<double>(begin: 0.0, end: 1.0),
duration: Duration(
milliseconds: 400 + (index % 5) * 50,
), // Staggered delay
curve: Curves.easeOutCubic,
builder: (context, animationValue, child) {
return Transform.translate(
offset: Offset(
0,
20 * (1 - animationValue),
), // Slide up from bottom
child: Opacity(opacity: animationValue, child: child),
);
},
child: thoughtWidget,
);
}
Widget streamingThoughtItem() => Container(
margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(12),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(Symbols.smart_toy, size: 20),
const Gap(8),
Text(
'thoughtAiName'.tr(),
style: Theme.of(context).textTheme.titleSmall,
),
const Spacer(),
SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(strokeWidth: 2),
),
],
),
const Gap(8),
MarkdownTextContent(
content: streamingText.value,
textStyle: Theme.of(context).textTheme.bodyMedium,
extraBlockSyntaxList: [ProposalBlockSyntax()],
extraGenerators: [
ProposalGenerator(
backgroundColor:
Theme.of(context).colorScheme.secondaryContainer,
foregroundColor:
Theme.of(context).colorScheme.onSecondaryContainer,
borderColor: Theme.of(context).colorScheme.outline,
),
],
),
if (reasoningChunks.value.isNotEmpty ||
functionCalls.value.isNotEmpty) ...[
const Gap(8),
Column(
children: [
...reasoningChunks.value.map(
(chunk) => Card(
margin: const EdgeInsets.only(bottom: 8),
child: Theme(
data: Theme.of(
context,
).copyWith(dividerColor: Colors.transparent),
child: ExpansionTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
title: Text(
'Reasoning',
style: Theme.of(context).textTheme.titleSmall,
),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
chunk,
style: Theme.of(context).textTheme.bodyMedium,
),
),
],
),
),
),
),
...functionCalls.value.map(
(call) => Card(
margin: const EdgeInsets.only(bottom: 8),
child: Theme(
data: Theme.of(
context,
).copyWith(dividerColor: Colors.transparent),
child: ExpansionTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
visualDensity: VisualDensity.compact,
title: Text(
'Function Call',
style: Theme.of(context).textTheme.titleSmall,
),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SelectableText(
call,
style: GoogleFonts.robotoMono(),
),
),
],
),
),
),
),
],
),
],
],
),
);
return SheetScaffold(
titleText: currentTopic.value ?? 'aiThought'.tr(),
child: Center(
@@ -612,80 +208,107 @@ class ThoughtSheet extends HookConsumerWidget {
localThoughts.value.length + (isStreaming.value ? 1 : 0),
itemBuilder: (context, index) {
if (isStreaming.value && index == 0) {
return streamingThoughtItem();
return streamingThoughtItem(
streamingText.value,
reasoningChunks.value,
functionCalls.value,
context,
);
}
final thoughtIndex = isStreaming.value ? index - 1 : index;
final thought = localThoughts.value[thoughtIndex];
return thoughtItem(thought, thoughtIndex);
return thoughtItem(thought, thoughtIndex, context);
},
),
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
if (attachedMessages.isNotEmpty || attachedPosts.isNotEmpty)
Container(
margin: const EdgeInsets.only(
left: 16,
right: 16,
bottom: 8,
),
child: Row(
children: [
Icon(
Symbols.attach_file,
size: 16,
color: Theme.of(context).colorScheme.primary,
),
const Gap(8),
Expanded(
child: Text(
[
if (attachedMessages.isNotEmpty)
'${attachedMessages.length} message${attachedMessages.length > 1 ? 's' : ''}',
if (attachedPosts.isNotEmpty)
'${attachedPosts.length} post${attachedPosts.length > 1 ? 's' : ''}',
].join(', '),
style: Theme.of(
context,
).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.w500,
Container(
margin: EdgeInsets.only(
left: 16,
right: 16,
bottom: 16 + MediaQuery.of(context).padding.bottom,
),
child: Material(
elevation: 2,
color: Theme.of(context).colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(32),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 6,
horizontal: 8,
),
child: Column(
children: [
if (attachedMessages.isNotEmpty ||
attachedPosts.isNotEmpty)
Container(
key: ValueKey(
'attachments-${attachedMessages.length}-${attachedPosts.length}',
),
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
margin: const EdgeInsets.only(
left: 4,
right: 4,
top: 4,
bottom: 4,
),
decoration: BoxDecoration(
color:
Theme.of(
context,
).colorScheme.surfaceContainerHigh,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: Theme.of(
context,
).colorScheme.outline.withOpacity(0.2),
width: 1,
),
),
),
IconButton(
icon: const Icon(Symbols.close, size: 16),
onPressed: () {
// Note: Since these are final parameters, we can't modify them directly
// This would require making the sheet stateful or using a callback
// For now, just show the indicator without remove functionality
},
style: IconButton.styleFrom(
minimumSize: const Size(24, 24),
padding: EdgeInsets.zero,
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Icon(
Symbols.attach_file,
size: 14,
color: Theme.of(context).colorScheme.primary,
),
const Gap(4),
Text(
[
if (attachedMessages.isNotEmpty)
'${attachedMessages.length} message${attachedMessages.length > 1 ? 's' : ''}',
if (attachedPosts.isNotEmpty)
'${attachedPosts.length} post${attachedPosts.length > 1 ? 's' : ''}',
].join(', '),
style: Theme.of(
context,
).textTheme.bodySmall!.copyWith(
fontWeight: FontWeight.w500,
fontSize: 12,
),
),
const Spacer(),
SizedBox(
width: 24,
height: 24,
child: IconButton(
padding: EdgeInsets.zero,
icon: const Icon(Icons.close, size: 14),
onPressed: () {
// Note: Since these are final parameters, we can't modify them directly
// This would require making the sheet stateful or using a callback
// For now, just show the indicator without remove functionality
},
tooltip: 'clear'.tr(),
),
),
],
),
),
],
),
),
Container(
margin: EdgeInsets.only(
left: 16,
right: 16,
bottom: 16 + MediaQuery.of(context).padding.bottom,
),
child: Material(
elevation: 2,
color:
Theme.of(context).colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(32),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 6,
horizontal: 8,
),
child: Row(
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
@@ -720,10 +343,10 @@ class ThoughtSheet extends HookConsumerWidget {
),
],
),
),
],
),
),
],
),
),
],
),
@@ -732,135 +355,3 @@ class ThoughtSheet extends HookConsumerWidget {
);
}
}
class ProposalBlockSyntax extends markdown.BlockSyntax {
@override
RegExp get pattern => RegExp(r'^<proposal', caseSensitive: false);
@override
bool canParse(markdown.BlockParser parser) {
return pattern.hasMatch(parser.current.content);
}
@override
bool canEndBlock(markdown.BlockParser parser) {
return parser.current.content.contains('</proposal>');
}
@override
markdown.Node parse(markdown.BlockParser parser) {
final childLines = <String>[];
// Extract type from opening tag
final openingLine = parser.current.content;
final attrsMatch = RegExp(
r'<proposal(\s[^>]*)?>',
caseSensitive: false,
).firstMatch(openingLine);
final attrs = attrsMatch?.group(1) ?? '';
final typeMatch = RegExp(r'type="([^"]*)"').firstMatch(attrs);
final type = typeMatch?.group(1) ?? '';
// Collect all lines until closing tag
while (!parser.isDone) {
childLines.add(parser.current.content);
if (canEndBlock(parser)) {
parser.advance();
break;
}
parser.advance();
}
// Extract content between tags
final fullContent = childLines.join('\n');
final contentMatch = RegExp(
r'<proposal[^>]*>(.*?)</proposal>',
dotAll: true,
caseSensitive: false,
).firstMatch(fullContent);
final content = contentMatch?.group(1)?.trim() ?? '';
final element = markdown.Element('proposal', [markdown.Text(content)])
..attributes['type'] = type;
return element;
}
}
class ProposalGenerator extends SpanNodeGeneratorWithTag {
ProposalGenerator({
required Color backgroundColor,
required Color foregroundColor,
required Color borderColor,
}) : super(
tag: 'proposal',
generator: (
markdown.Element element,
MarkdownConfig config,
WidgetVisitor visitor,
) {
return ProposalSpanNode(
text: element.textContent,
type: element.attributes['type'] ?? '',
backgroundColor: backgroundColor,
foregroundColor: foregroundColor,
borderColor: borderColor,
);
},
);
}
class ProposalSpanNode extends SpanNode {
final String text;
final String type;
final Color backgroundColor;
final Color foregroundColor;
final Color borderColor;
ProposalSpanNode({
required this.text,
required this.type,
required this.backgroundColor,
required this.foregroundColor,
required this.borderColor,
});
@override
InlineSpan build() {
return WidgetSpan(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: backgroundColor,
border: Border.all(color: borderColor, width: 1),
borderRadius: BorderRadius.circular(8),
),
child: Column(
mainAxisSize: MainAxisSize.min,
spacing: 6,
children: [
Row(
spacing: 6,
children: [
Icon(Symbols.lightbulb, size: 16, color: foregroundColor),
Text(
'SN-chan suggest you to ${type.split('_').reversed.join(' ')}',
).fontSize(13).opacity(0.8),
],
).padding(top: 3, bottom: 4),
Flexible(
child: Text(
text,
style: TextStyle(
color: foregroundColor,
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
),
],
),
),
);
}
}

View File

@@ -43,6 +43,10 @@ class MessageItem extends HookConsumerWidget {
final Map<int, double>? progress;
final bool showAvatar;
final Function(String messageId) onJump;
final bool isSelectionMode;
final bool isSelected;
final Function(String messageId)? onToggleSelection;
final Function()? onEnterSelectionMode;
const MessageItem({
super.key,
@@ -52,6 +56,10 @@ class MessageItem extends HookConsumerWidget {
required this.progress,
required this.showAvatar,
required this.onJump,
this.isSelectionMode = false,
this.isSelected = false,
this.onToggleSelection,
this.onEnterSelectionMode,
});
static const kFlashDuration = 300;
@@ -110,6 +118,8 @@ class MessageItem extends HookConsumerWidget {
isMobile: isMobile,
remoteMessage: remoteMessage,
message: message,
onToggleSelection: onToggleSelection,
onEnterSelectionMode: onEnterSelectionMode,
),
);
}
@@ -182,17 +192,27 @@ class MessageItem extends HookConsumerWidget {
child: InkWell(
mouseCursor: MouseCursor.defer,
focusColor: Colors.transparent,
onLongPress: showActionMenu,
onLongPress: () {
if (isSelectionMode && onToggleSelection != null) {
onToggleSelection!(message.id);
} else {
showActionMenu();
}
},
onSecondaryTap: showActionMenu,
onTap: () {
// Jump to related message
if ([
'messages.update',
'messages.delete',
].contains(message.type) &&
message.meta['message_id'] is String &&
message.meta['message_id'] != null) {
onJump(message.meta['message_id']);
if (isSelectionMode && onToggleSelection != null) {
onToggleSelection!(message.id);
} else {
// Jump to related message
if ([
'messages.update',
'messages.delete',
].contains(message.type) &&
message.meta['message_id'] is String &&
message.meta['message_id'] != null) {
onJump(message.meta['message_id']);
}
}
},
child: SizedBox(
@@ -271,6 +291,8 @@ class MessageActionSheet extends StatefulWidget {
final bool isMobile;
final dynamic remoteMessage;
final LocalChatMessage message;
final Function(String messageId)? onToggleSelection;
final Function()? onEnterSelectionMode;
const MessageActionSheet({
super.key,
@@ -283,6 +305,8 @@ class MessageActionSheet extends StatefulWidget {
required this.isMobile,
required this.remoteMessage,
required this.message,
this.onToggleSelection,
this.onEnterSelectionMode,
});
@override
@@ -461,6 +485,21 @@ class _MessageActionSheetState extends State<MessageActionSheet> {
},
),
// AI Selection action
_ActionListTile(
leading: Icon(Symbols.smart_toy),
title: Text('Select for AI'),
onTap: () {
if (widget.onEnterSelectionMode != null) {
widget.onEnterSelectionMode!();
if (widget.onToggleSelection != null) {
widget.onToggleSelection!(widget.message.id);
}
}
Navigator.pop(context);
},
),
if (widget.translatableLanguage) const Divider(),
if (widget.translatableLanguage)
_ActionListTile(

View File

@@ -0,0 +1,535 @@
import "dart:convert";
import "package:easy_localization/easy_localization.dart";
import "package:flutter/material.dart";
import "package:flutter/services.dart";
import "package:gap/gap.dart";
import "package:google_fonts/google_fonts.dart";
import "package:island/models/thought.dart";
import "package:island/services/time.dart";
import "package:island/widgets/alert.dart";
import "package:island/widgets/content/markdown.dart";
import "package:island/widgets/post/compose_dialog.dart";
import "package:island/screens/posts/compose.dart";
import "package:material_symbols_icons/material_symbols_icons.dart";
import "package:styled_widget/styled_widget.dart";
import "package:markdown/markdown.dart" as markdown;
import "package:markdown_widget/markdown_widget.dart";
// Common functions
List<Map<String, String>> extractProposals(String content) {
final proposalRegex = RegExp(
r'<proposal\s+type="([^"]+)">(.*?)<\/proposal>',
dotAll: true,
);
final matches = proposalRegex.allMatches(content);
return matches.map((match) {
return {'type': match.group(1)!, 'content': match.group(2)!};
}).toList();
}
void handleProposalAction(BuildContext context, Map<String, String> proposal) {
switch (proposal['type']) {
case 'post_create':
// Show post creation dialog with the proposal content
PostComposeDialog.show(
context,
initialState: PostComposeInitialState(
content: (proposal['content'] ?? '').trim(),
),
);
break;
default:
// Show a snackbar for unsupported proposal types
showSnackBar('Unsupported proposal type: ${proposal['type']}');
}
}
// Common widgets
Widget buildChunkTiles(List<SnThinkingChunk> chunks, BuildContext context) {
return Column(
children: [
...chunks
.where((chunk) => chunk.type == ThinkingChunkType.reasoning)
.map(
(chunk) => Card(
margin: const EdgeInsets.only(bottom: 8),
child: Theme(
data: Theme.of(
context,
).copyWith(dividerColor: Colors.transparent),
child: ExpansionTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
title: Text(
'Reasoning',
style: Theme.of(context).textTheme.titleSmall,
),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
chunk.data?['content'] ?? '',
style: Theme.of(context).textTheme.bodyMedium,
),
),
],
),
),
),
),
...chunks
.where((chunk) => chunk.type == ThinkingChunkType.functionCall)
.map(
(chunk) => Card(
margin: const EdgeInsets.only(bottom: 8),
child: Theme(
data: Theme.of(
context,
).copyWith(dividerColor: Colors.transparent),
child: ExpansionTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
visualDensity: VisualDensity.compact,
title: Text(
'Function Call',
style: Theme.of(context).textTheme.titleSmall,
),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SelectableText(
JsonEncoder.withIndent(' ').convert(chunk.data),
style: GoogleFonts.robotoMono(),
),
),
],
),
),
),
),
],
);
}
Widget thoughtItem(SnThinkingThought thought, int index, BuildContext context) {
final key = Key('thought-${thought.id}');
// Extract proposals from thought content
final proposals =
thought.content != null ? extractProposals(thought.content!) : [];
final thoughtWidget = Container(
margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color:
thought.role == ThinkingThoughtRole.assistant
? Theme.of(context).colorScheme.surfaceContainerHighest
: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(12),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
thought.role == ThinkingThoughtRole.assistant
? Symbols.smart_toy
: Symbols.person,
size: 20,
),
const Gap(8),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.ideographic,
spacing: 8,
children: [
Text(
thought.role == ThinkingThoughtRole.assistant
? 'thoughtAiName'.tr()
: 'thoughtUserName'.tr(),
style: Theme.of(context).textTheme.titleSmall,
),
Tooltip(
message: thought.createdAt.formatSystem(),
child: Text(
thought.createdAt.formatRelative(context),
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
),
],
),
),
if (thought.role == ThinkingThoughtRole.assistant)
SizedBox(
height: 20,
width: 20,
child: IconButton(
visualDensity: VisualDensity(horizontal: -4, vertical: -4),
padding: EdgeInsets.zero,
iconSize: 16,
icon: Icon(Symbols.content_copy),
onPressed: () {
Clipboard.setData(
ClipboardData(text: thought.content ?? ''),
);
showSnackBar('copiedToClipboard'.tr());
},
),
),
],
),
const Gap(8),
if (thought.chunks.isNotEmpty) ...[
buildChunkTiles(thought.chunks, context),
const Gap(8),
],
if (thought.content != null)
MarkdownTextContent(
isSelectable: true,
content: thought.content!,
extraBlockSyntaxList: [ProposalBlockSyntax()],
textStyle: Theme.of(context).textTheme.bodyMedium,
extraGenerators: [
ProposalGenerator(
backgroundColor:
Theme.of(context).colorScheme.secondaryContainer,
foregroundColor:
Theme.of(context).colorScheme.onSecondaryContainer,
borderColor: Theme.of(context).colorScheme.outline,
),
],
),
if (thought.role == ThinkingThoughtRole.assistant &&
(thought.tokenCount != null || thought.modelName != null)) ...[
const Gap(8),
Row(
children: [
if (thought.modelName != null) ...[
const Icon(Symbols.neurology, size: 16),
const Gap(4),
Text(
'${thought.modelName}',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
const Gap(16),
],
if (thought.tokenCount != null)
...([
const Icon(Symbols.token, size: 16),
const Gap(4),
Text(
'${thought.tokenCount} tokens',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
]),
],
),
],
if (proposals.isNotEmpty &&
thought.role == ThinkingThoughtRole.assistant) ...[
const Gap(12),
Wrap(
spacing: 8,
runSpacing: 8,
children:
proposals.map((proposal) {
return ElevatedButton.icon(
onPressed: () => handleProposalAction(context, proposal),
icon: Icon(switch (proposal['type']) {
'post_create' => Symbols.add,
_ => Symbols.lightbulb,
}, size: 16),
label: Text(switch (proposal['type']) {
'post_create' => 'Create Post',
_ => proposal['type'] ?? 'Action',
}),
style: ElevatedButton.styleFrom(
backgroundColor:
Theme.of(context).colorScheme.primaryContainer,
foregroundColor:
Theme.of(context).colorScheme.onPrimaryContainer,
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 8,
),
),
);
}).toList(),
),
],
],
),
);
return TweenAnimationBuilder<double>(
key: key,
tween: Tween<double>(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 400 + (index % 5) * 50), // Staggered delay
curve: Curves.easeOutCubic,
builder: (context, animationValue, child) {
return Transform.translate(
offset: Offset(0, 20 * (1 - animationValue)), // Slide up from bottom
child: Opacity(opacity: animationValue, child: child),
);
},
child: thoughtWidget,
);
}
Widget streamingThoughtItem(
String streamingText,
List<String> reasoningChunks,
List<String> functionCalls,
BuildContext context,
) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(12),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(Symbols.smart_toy, size: 20),
const Gap(8),
Text(
'thoughtAiName'.tr(),
style: Theme.of(context).textTheme.titleSmall,
),
const Spacer(),
SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(strokeWidth: 2),
),
],
),
const Gap(8),
MarkdownTextContent(
content: streamingText,
textStyle: Theme.of(context).textTheme.bodyMedium,
extraBlockSyntaxList: [ProposalBlockSyntax()],
extraGenerators: [
ProposalGenerator(
backgroundColor: Theme.of(context).colorScheme.secondaryContainer,
foregroundColor:
Theme.of(context).colorScheme.onSecondaryContainer,
borderColor: Theme.of(context).colorScheme.outline,
),
],
),
if (reasoningChunks.isNotEmpty || functionCalls.isNotEmpty) ...[
const Gap(8),
Column(
children: [
...reasoningChunks.map(
(chunk) => Card(
margin: const EdgeInsets.only(bottom: 8),
child: Theme(
data: Theme.of(
context,
).copyWith(dividerColor: Colors.transparent),
child: ExpansionTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
title: Text(
'Reasoning',
style: Theme.of(context).textTheme.titleSmall,
),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
chunk,
style: Theme.of(context).textTheme.bodyMedium,
),
),
],
),
),
),
),
...functionCalls.map(
(call) => Card(
margin: const EdgeInsets.only(bottom: 8),
child: Theme(
data: Theme.of(
context,
).copyWith(dividerColor: Colors.transparent),
child: ExpansionTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
visualDensity: VisualDensity.compact,
title: Text(
'Function Call',
style: Theme.of(context).textTheme.titleSmall,
),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SelectableText(
call,
style: GoogleFonts.robotoMono(),
),
),
],
),
),
),
),
],
),
],
],
),
);
}
class ProposalBlockSyntax extends markdown.BlockSyntax {
@override
RegExp get pattern => RegExp(r'^<proposal', caseSensitive: false);
@override
bool canParse(markdown.BlockParser parser) {
return pattern.hasMatch(parser.current.content);
}
@override
bool canEndBlock(markdown.BlockParser parser) {
return parser.current.content.contains('</proposal>');
}
@override
markdown.Node parse(markdown.BlockParser parser) {
final childLines = <String>[];
// Extract type from opening tag
final openingLine = parser.current.content;
final attrsMatch = RegExp(
r'<proposal(\s[^>]*)?>',
caseSensitive: false,
).firstMatch(openingLine);
final attrs = attrsMatch?.group(1) ?? '';
final typeMatch = RegExp(r'type="([^"]*)"').firstMatch(attrs);
final type = typeMatch?.group(1) ?? '';
// Collect all lines until closing tag
while (!parser.isDone) {
childLines.add(parser.current.content);
if (canEndBlock(parser)) {
parser.advance();
break;
}
parser.advance();
}
// Extract content between tags
final fullContent = childLines.join('\n');
final contentMatch = RegExp(
r'<proposal[^>]*>(.*?)</proposal>',
dotAll: true,
caseSensitive: false,
).firstMatch(fullContent);
final content = contentMatch?.group(1)?.trim() ?? '';
final element = markdown.Element('proposal', [markdown.Text(content)])
..attributes['type'] = type;
return element;
}
}
class ProposalGenerator extends SpanNodeGeneratorWithTag {
ProposalGenerator({
required Color backgroundColor,
required Color foregroundColor,
required Color borderColor,
}) : super(
tag: 'proposal',
generator: (
markdown.Element element,
MarkdownConfig config,
WidgetVisitor visitor,
) {
return ProposalSpanNode(
text: element.textContent,
type: element.attributes['type'] ?? '',
backgroundColor: backgroundColor,
foregroundColor: foregroundColor,
borderColor: borderColor,
);
},
);
}
class ProposalSpanNode extends SpanNode {
final String text;
final String type;
final Color backgroundColor;
final Color foregroundColor;
final Color borderColor;
ProposalSpanNode({
required this.text,
required this.type,
required this.backgroundColor,
required this.foregroundColor,
required this.borderColor,
});
@override
InlineSpan build() {
return WidgetSpan(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: backgroundColor,
border: Border.all(color: borderColor, width: 1),
borderRadius: BorderRadius.circular(8),
),
child: Column(
mainAxisSize: MainAxisSize.min,
spacing: 6,
children: [
Row(
spacing: 6,
children: [
Icon(Symbols.lightbulb, size: 16, color: foregroundColor),
Text(
'SN-chan suggest you to ${type.split('_').reversed.join(' ')}',
).fontSize(13).opacity(0.8),
],
).padding(top: 3, bottom: 4),
Flexible(
child: Text(
text,
style: TextStyle(
color: foregroundColor,
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
),
],
),
),
);
}
}