SolarNetwork/App
3
3
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Optimize UI and UX for thought

Browse Source
This commit is contained in:
LittleSheep
2025-10-27 01:40:35 +08:00
parent 08091d51bf
commit f74cca8464
8 changed files with 302 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
lib/widgets/post/post_shared.dart
View File

@@ -358,9 +358,11 @@ class ReferencedPostWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final referencePost = item.repliedPost ?? item.forwardedPost;
if (referencePost == null) return const SizedBox.shrink();
final isGone = item.repliedGone || item.forwardedGone;
final isReply = item.repliedPost != null;
if (referencePost == null && !isGone) return const SizedBox.shrink();
final isReply = item.repliedPost != null || item.repliedGone;
final content = Container(
padding: EdgeInsets.symmetric(
@@ -401,115 +403,136 @@ class ReferencedPostWidget extends StatelessWidget {
],
),
const SizedBox(height: 8),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ProfilePictureWidget(
fileId: referencePost.publisher.picture?.id,
radius: 16,
),
const SizedBox(width: 8),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
referencePost.publisher.nick,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
if (referencePost.visibility != 0)
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
PostVisibilityHelpers.getVisibilityIcon(
referencePost.visibility,
),
size: 12,
color: Theme.of(context).colorScheme.secondary,
),
const SizedBox(width: 4),
Text(
PostVisibilityHelpers.getVisibilityText(
referencePost.visibility,
).tr(),
style: TextStyle(
fontSize: 10,
color: Theme.of(context).colorScheme.secondary,
),
),
],
).padding(top: 2, bottom: 2),
if (referencePost.title?.isNotEmpty ?? false)
Text(
referencePost.title!,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 13,
color: Theme.of(context).colorScheme.onSurface,
),
).padding(top: 2, bottom: 2),
if (referencePost.description?.isNotEmpty ?? false)
Text(
referencePost.description!,
style: TextStyle(
fontSize: 12,
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
).padding(bottom: 2),
if (referencePost.content?.isNotEmpty ?? false)
MarkdownTextContent(
content: referencePost.content!,
textStyle: const TextStyle(fontSize: 14),
isSelectable: false,
linesMargin:
referencePost.type == 0
? const EdgeInsets.only(bottom: 4)
: null,
attachments: item.attachments,
).padding(bottom: 4),
if (referencePost.isTruncated)
const PostTruncateHint(
isCompact: true,
margin: EdgeInsets.only(top: 4, bottom: 8),
),
if (referencePost.attachments.isNotEmpty &&
referencePost.type != 1)
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Symbols.attach_file,
size: 12,
color: Theme.of(context).colorScheme.secondary,
),
const SizedBox(width: 4),
Text(
'postHasAttachments'.plural(
referencePost.attachments.length,
),
style: TextStyle(
color: Theme.of(context).colorScheme.secondary,
fontSize: 12,
),
),
],
).padding(vertical: 2),
],
if (isGone)
Row(
children: [
Icon(
Symbols.visibility_off,
size: 16,
color: Theme.of(context).colorScheme.secondary,
),
),
],
),
const SizedBox(width: 8),
Text(
'postReferenceUnavailable'.tr(),
style: TextStyle(
color: Theme.of(context).colorScheme.secondary,
fontSize: 14,
fontStyle: FontStyle.italic,
),
),
],
)
else
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ProfilePictureWidget(
fileId: referencePost!.publisher.picture?.id,
radius: 16,
),
const SizedBox(width: 8),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
referencePost.publisher.nick,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
if (referencePost.visibility != 0)
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
PostVisibilityHelpers.getVisibilityIcon(
referencePost.visibility,
),
size: 12,
color: Theme.of(context).colorScheme.secondary,
),
const SizedBox(width: 4),
Text(
PostVisibilityHelpers.getVisibilityText(
referencePost.visibility,
).tr(),
style: TextStyle(
fontSize: 10,
color: Theme.of(context).colorScheme.secondary,
),
),
],
).padding(top: 2, bottom: 2),
if (referencePost.title?.isNotEmpty ?? false)
Text(
referencePost.title!,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 13,
color: Theme.of(context).colorScheme.onSurface,
),
).padding(top: 2, bottom: 2),
if (referencePost.description?.isNotEmpty ?? false)
Text(
referencePost.description!,
style: TextStyle(
fontSize: 12,
color:
Theme.of(context).colorScheme.onSurfaceVariant,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
).padding(bottom: 2),
if (referencePost.content?.isNotEmpty ?? false)
MarkdownTextContent(
content: referencePost.content!,
textStyle: const TextStyle(fontSize: 14),
isSelectable: false,
linesMargin:
referencePost.type == 0
? const EdgeInsets.only(bottom: 4)
: null,
attachments: item.attachments,
).padding(bottom: 4),
if (referencePost.isTruncated)
const PostTruncateHint(
isCompact: true,
margin: EdgeInsets.only(top: 4, bottom: 8),
),
if (referencePost.attachments.isNotEmpty &&
referencePost.type != 1)
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Symbols.attach_file,
size: 12,
color: Theme.of(context).colorScheme.secondary,
),
const SizedBox(width: 4),
Text(
'postHasAttachments'.plural(
referencePost.attachments.length,
),
style: TextStyle(
color: Theme.of(context).colorScheme.secondary,
fontSize: 12,
),
),
],
).padding(vertical: 2),
],
),
),
],
),
],
),
);
if (!isInteractive) {
if (!isInteractive || isGone) {
return content;
}
@@ -517,7 +540,7 @@ class ReferencedPostWidget extends StatelessWidget {
onTap:
() => context.pushNamed(
'postDetail',
pathParameters: {'id': referencePost.id},
pathParameters: {'id': referencePost!.id},
),
);
}

169
lib/widgets/thought/function_calls_section.dart
View File

@@ -7,7 +7,7 @@ import 'package:google_fonts/google_fonts.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import 'package:island/models/thought.dart';
class FunctionCallsSection extends StatelessWidget {
class FunctionCallsSection extends StatefulWidget {
const FunctionCallsSection({
super.key,
required this.isStreaming,
@@ -19,12 +19,19 @@ class FunctionCallsSection extends StatelessWidget {
final List<String> streamingFunctionCalls;
final SnThinkingThought? thought;
@override
State<FunctionCallsSection> createState() => _FunctionCallsSectionState();
}
class _FunctionCallsSectionState extends State<FunctionCallsSection> {
bool _isExpanded = false;
bool get _hasFunctionCalls {
if (isStreaming) {
return streamingFunctionCalls.isNotEmpty;
if (widget.isStreaming) {
return widget.streamingFunctionCalls.isNotEmpty;
} else {
return thought!.chunks.isNotEmpty &&
thought!.chunks.any(
return widget.thought!.chunks.isNotEmpty &&
widget.thought!.chunks.any(
(chunk) => chunk.type == ThinkingChunkType.functionCall,
);
}
@@ -49,81 +56,103 @@ class FunctionCallsSection extends StatelessWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
Symbols.code,
size: 14,
color: Theme.of(context).colorScheme.tertiary,
),
const Gap(4),
Text(
'functionCalls'.tr(),
style: Theme.of(context).textTheme.bodySmall!.copyWith(
fontWeight: FontWeight.w600,
InkWell(
onTap: () => setState(() => _isExpanded = !_isExpanded),
child: Row(
children: [
Icon(
Symbols.code,
size: 14,
color: Theme.of(context).colorScheme.tertiary,
),
),
],
),
const Gap(4),
if (isStreaming) ...[
...streamingFunctionCalls.map(
(call) => Container(
width: double.infinity,
padding: const EdgeInsets.all(8),
margin: const EdgeInsets.only(bottom: 4),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(4),
border: Border.all(
color: Theme.of(
context,
).colorScheme.outline.withOpacity(0.3),
width: 1,
const Gap(4),
Expanded(
child: Text(
'thoughtFunctionCall'.tr(),
style: Theme.of(context).textTheme.bodySmall!.copyWith(
fontWeight: FontWeight.w600,
color: Theme.of(context).colorScheme.tertiary,
),
),
),
child: SelectableText(
call,
style: GoogleFonts.robotoMono(
fontSize: 11,
color: Theme.of(context).colorScheme.onSurface,
height: 1.3,
),
Icon(
_isExpanded ? Symbols.expand_more : Symbols.expand_less,
size: 16,
color: Theme.of(context).colorScheme.tertiary,
),
),
],
),
] else ...[
...thought!.chunks
.where(
(chunk) => chunk.type == ThinkingChunkType.functionCall,
)
.map(
(chunk) => Container(
width: double.infinity,
padding: const EdgeInsets.all(8),
margin: const EdgeInsets.only(bottom: 4),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(4),
border: Border.all(
color: Theme.of(
context,
).colorScheme.outline.withOpacity(0.3),
width: 1,
),
Visibility(visible: _isExpanded, child: const Gap(4)),
Visibility(
visible: _isExpanded,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (widget.isStreaming) ...[
...widget.streamingFunctionCalls.map(
(call) => Container(
width: double.infinity,
padding: const EdgeInsets.all(8),
margin: const EdgeInsets.only(bottom: 4),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(4),
border: Border.all(
color: Theme.of(
context,
).colorScheme.outline.withOpacity(0.3),
width: 1,
),
),
),
child: SelectableText(
JsonEncoder.withIndent(' ').convert(chunk.data),
style: GoogleFonts.robotoMono(
fontSize: 11,
color: Theme.of(context).colorScheme.onSurface,
height: 1.3,
child: SelectableText(
call,
style: GoogleFonts.robotoMono(
fontSize: 11,
color: Theme.of(context).colorScheme.onSurface,
height: 1.3,
),
),
),
),
),
],
] else ...[
...widget.thought!.chunks
.where(
(chunk) =>
chunk.type == ThinkingChunkType.functionCall,
)
.map(
(chunk) => Container(
width: double.infinity,
padding: const EdgeInsets.all(8),
margin: const EdgeInsets.only(bottom: 4),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(4),
border: Border.all(
color: Theme.of(
context,
).colorScheme.outline.withOpacity(0.3),
width: 1,
),
),
child: SelectableText(
JsonEncoder.withIndent(
' ',
).convert(chunk.data),
style: GoogleFonts.robotoMono(
fontSize: 11,
color:
Theme.of(context).colorScheme.onSurface,
height: 1.3,
),
),
),
),
],
],
),
),
],
),
),

31
lib/widgets/thought/thought_header.dart
View File

@@ -28,7 +28,7 @@ class ThoughtHeader extends StatelessWidget {
fill: 1,
),
Text(
isUser ? 'thoughtUserName'.tr() : 'aiThought'.tr(),
isUser ? 'thoughtUserName'.tr() : 'thoughtAiName'.tr(),
style: Theme.of(context).textTheme.titleSmall!.copyWith(
fontWeight: FontWeight.w600,
color:
@@ -40,12 +40,29 @@ class ThoughtHeader extends StatelessWidget {
],
);
} else {
return Text(
'aiThought'.tr(),
style: Theme.of(context).textTheme.titleSmall!.copyWith(
fontWeight: FontWeight.w600,
color: Theme.of(context).colorScheme.primary,
),
return Row(
spacing: 6,
children: [
Icon(
Symbols.smart_toy,
size: 16,
color:
isUser
? Theme.of(context).colorScheme.primary
: Theme.of(context).colorScheme.secondary,
fill: 1,
),
Text(
'thoughtAiName'.tr(),
style: Theme.of(context).textTheme.titleSmall!.copyWith(
fontWeight: FontWeight.w600,
color:
isUser
? Theme.of(context).colorScheme.primary
: Theme.of(context).colorScheme.secondary,
),
),
],
);
}
}

24
lib/widgets/thought/thought_shared.dart
View File

@@ -13,6 +13,7 @@ import 'package:island/widgets/thought/thought_content.dart';
import 'package:island/widgets/thought/thought_header.dart';
import 'package:island/widgets/thought/token_info.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import 'package:styled_widget/styled_widget.dart';
List<Map<String, String>> _extractProposals(String content) {
final proposalRegex = RegExp(
@@ -81,18 +82,12 @@ class ThoughtInput extends HookWidget {
'attachments-${attachedMessages?.length ?? 0}-${attachedPosts?.length ?? 0}',
),
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
margin: const EdgeInsets.only(
left: 4,
right: 4,
top: 4,
bottom: 4,
horizontal: 16,
vertical: 8,
),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainerHigh,
borderRadius: BorderRadius.circular(16),
borderRadius: BorderRadius.circular(24),
border: Border.all(
color: Theme.of(
context,
@@ -100,6 +95,12 @@ class ThoughtInput extends HookWidget {
width: 1,
),
),
margin: const EdgeInsets.only(
left: 8,
right: 8,
top: 8,
bottom: 4,
),
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
@@ -264,6 +265,11 @@ class ThoughtItem extends StatelessWidget {
proposals: proposals,
onProposalAction: _handleProposalAction,
),
if (isStreaming && isAI)
LinearProgressIndicator().padding(
top: streamingText.isNotEmpty ? 8 : 0,
),
],
),
),