💄 Optimize UI and UX for thought

This commit is contained in:
2025-10-27 01:40:35 +08:00
parent 08091d51bf
commit f74cca8464
8 changed files with 302 additions and 214 deletions

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,
),
),
),
),
],
],
),
),
],
),
),