UserQuestionPanel.razor

@namespace WebCodeCli.Components
@using WebCodeCli.Domain.Domain.Model

@if (UserQuestion != null)
{
    var toolUseId = UserQuestion.ToolUseId ?? "";
    var isAnswered = UserQuestion.IsAnswered;

    <div class="space-y-3">
        @if (isAnswered)
        {
            <div class="bg-emerald-50/50 border border-emerald-100 rounded-lg px-3 py-2 text-emerald-700 flex items-center gap-2 text-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
                <span>已回答</span>
            </div>
        }
        else
        {
            @for (var qIdx = 0; qIdx < UserQuestion.Questions.Count; qIdx++)
            {
                var question = UserQuestion.Questions[qIdx];
                var questionIndex = qIdx;

                <div class="bg-slate-50/50 border border-slate-200 rounded-lg p-3 space-y-2">
                    @if (!string.IsNullOrWhiteSpace(question.Header))
                    {
                        <div class="text-xs font-semibold text-slate-600 uppercase tracking-wide">@question.Header</div>
                    }

                    @if (!string.IsNullOrWhiteSpace(question.Question))
                    {
                        <div class="text-sm text-gray-700">@question.Question</div>
                    }

                    @if (question.Options.Count > 0)
                    {
                        <div class="space-y-1.5 mt-2">
                            @for (var oIdx = 0; oIdx < question.Options.Count; oIdx++)
                            {
                                var option = question.Options[oIdx];
                                var optionIndex = oIdx;
                                var isSelected = IsOptionSelected(questionIndex, optionIndex);

                                <button type="button"
                                        class="@(isSelected
                                            ? "w-full text-left px-3 py-2 rounded-lg border border-slate-400 bg-slate-100 transition-all flex items-start gap-2.5"
                                            : "w-full text-left px-3 py-2 rounded-lg border border-gray-200 bg-white hover:border-slate-300 hover:bg-slate-50/50 transition-all flex items-start gap-2.5")"
                                        @onclick="() => ToggleOption(questionIndex, optionIndex, question.MultiSelect)">

                                    <div class="flex-shrink-0 mt-0.5">
                                        @if (question.MultiSelect)
                                        {
                                            <div class="@(isSelected
                                                ? "w-4 h-4 rounded border-2 border-slate-500 bg-slate-500 flex items-center justify-center"
                                                : "w-4 h-4 rounded border-2 border-gray-300 bg-white")">
                                                @if (isSelected)
                                                {
                                                    <svg class="w-2.5 h-2.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
                                                    </svg>
                                                }
                                            </div>
                                        }
                                        else
                                        {
                                            <div class="@(isSelected
                                                ? "w-4 h-4 rounded-full border-2 border-slate-500 bg-white flex items-center justify-center"
                                                : "w-4 h-4 rounded-full border-2 border-gray-300 bg-white")">
                                                @if (isSelected)
                                                {
                                                    <div class="w-2 h-2 rounded-full bg-slate-500"></div>
                                                }
                                            </div>
                                        }
                                    </div>

                                    <div class="flex-1 min-w-0">
                                        <div class="text-sm font-medium text-gray-800">@option.Label</div>
                                        @if (!string.IsNullOrWhiteSpace(option.Description))
                                        {
                                            <div class="text-xs text-gray-500 mt-0.5">@option.Description</div>
                                        }
                                    </div>
                                </button>
                            }
                        </div>
                    }
                </div>
            }

            <div class="mt-3">
                <label class="block text-xs font-medium text-gray-500 mb-1">或者输入自定义回复：</label>
                  <input type="text"
                      class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:ring-1 focus:ring-slate-400 focus:border-slate-400 bg-white"
                      placeholder="输入您的回复..."
                      value="@_questionInput"
                      @oninput="(ChangeEventArgs e) => SetQuestionInput(e.Value?.ToString() ?? string.Empty)" />
            </div>

            <div class="mt-3 flex justify-end">
                <button type="button"
                        class="px-3 py-1.5 bg-slate-600 text-white text-sm rounded-lg hover:bg-slate-700 transition-colors font-medium flex items-center gap-1.5 shadow-sm"
                        @onclick="() => SubmitAnswer(toolUseId)">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    提交回答
                </button>
            </div>
        }
    </div>
}

@code {
    [Parameter] public UserQuestion? UserQuestion { get; set; }

    /// <summary>
    /// 用户回答问题的回调
    /// 参数: (toolUseId, 回答内容)
    /// </summary>
    [Parameter] public EventCallback<(string toolUseId, string answer)> OnAnswerQuestion { get; set; }

    private readonly Dictionary<int, HashSet<int>> _questionSelections = new();
    private string _questionInput = string.Empty;

    private bool IsOptionSelected(int questionIndex, int optionIndex)
    {
        if (!_questionSelections.TryGetValue(questionIndex, out var options))
            return false;
        return options.Contains(optionIndex);
    }

    private void ToggleOption(int questionIndex, int optionIndex, bool multiSelect)
    {
        if (!_questionSelections.ContainsKey(questionIndex))
            _questionSelections[questionIndex] = new HashSet<int>();

        var options = _questionSelections[questionIndex];

        if (multiSelect)
        {
            if (options.Contains(optionIndex))
                options.Remove(optionIndex);
            else
                options.Add(optionIndex);
        }
        else
        {
            options.Clear();
            options.Add(optionIndex);
        }

        StateHasChanged();
    }

    private void SetQuestionInput(string value)
    {
        _questionInput = value;
    }

    private async Task SubmitAnswer(string toolUseId)
    {
        if (string.IsNullOrEmpty(toolUseId) || UserQuestion == null) return;

        var answer = BuildAnswerText(UserQuestion);
        if (string.IsNullOrWhiteSpace(answer))
        {
            return;
        }

        UserQuestion.IsAnswered = true;
        _questionSelections.Clear();
        _questionInput = string.Empty;

        if (OnAnswerQuestion.HasDelegate)
        {
            await OnAnswerQuestion.InvokeAsync((toolUseId, answer));
        }

        StateHasChanged();
    }

    private string BuildAnswerText(UserQuestion userQuestion)
    {
        if (!string.IsNullOrWhiteSpace(_questionInput))
        {
            return _questionInput.Trim();
        }

        var answers = new List<string>();
        for (var qIdx = 0; qIdx < userQuestion.Questions.Count; qIdx++)
        {
            if (!_questionSelections.TryGetValue(qIdx, out var selectedOptions) || selectedOptions.Count == 0)
                continue;

            var question = userQuestion.Questions[qIdx];
            var selectedLabels = selectedOptions
                .Where(idx => idx >= 0 && idx < question.Options.Count)
                .Select(idx => question.Options[idx].Label)
                .Where(label => !string.IsNullOrEmpty(label))
                .ToList();

            if (selectedLabels.Count > 0)
            {
                answers.Add(string.Join(", ", selectedLabels));
            }
        }

        return string.Join("; ", answers);
    }
}