skill-web 0.3.0

Web interface for Skill Engine - built with Yew and WebAssembly
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286

//! Search Result Card Component - Expandable card with feedback buttons

use wasm_bindgen_futures::spawn_local;
use yew::prelude::*;

use crate::api::{Api, SubmitFeedbackRequest};
use crate::components::use_notifications;

#[derive(Properties, Clone, PartialEq)]
pub struct ResultCardProps {
    /// Result index (1-based)
    pub index: usize,
    /// Result ID (skill:tool)
    pub id: String,
    /// Skill name
    pub skill: String,
    /// Tool name
    pub tool: String,
    /// Content/description
    pub content: String,
    /// Relevance score
    pub score: f32,
    /// Optional rerank score
    pub rerank_score: Option<f32>,
    /// Search query that produced this result
    pub query: String,
}

#[function_component(ResultCard)]
pub fn result_card(props: &ResultCardProps) -> Html {
    let expanded = use_state(|| false);
    let feedback_submitted = use_state(|| None::<String>); // "positive" or "negative"
    let is_submitting = use_state(|| false);

    // API & notifications
    let api = use_memo((), |_| std::rc::Rc::new(Api::new()));
    let notifications = use_notifications();

    // Toggle expand/collapse
    let on_toggle = {
        let expanded = expanded.clone();
        Callback::from(move |_: web_sys::MouseEvent| {
            expanded.set(!*expanded);
        })
    };

    // Submit feedback handler
    let submit_feedback = {
        let props = props.clone();
        let api = api.clone();
        let feedback_submitted = feedback_submitted.clone();
        let is_submitting = is_submitting.clone();
        let notifications = notifications.clone();

        move |feedback_type: String| {
            if *is_submitting {
                return;
            }

            is_submitting.set(true);

            let api = api.clone();
            let feedback_submitted = feedback_submitted.clone();
            let is_submitting = is_submitting.clone();
            let notifications = notifications.clone();
            let props = props.clone();
            let feedback_type_clone = feedback_type.clone();

            spawn_local(async move {
                let request = SubmitFeedbackRequest {
                    query: props.query,
                    result_id: props.id.clone(),
                    score: props.score,
                    rank: props.index - 1, // Convert to 0-based
                    feedback_type: feedback_type.clone(),
                    reason: None,
                    comment: None,
                    client_type: "http".to_string(),
                };

                match api.feedback.submit(&request).await {
                    Ok(_) => {
                        feedback_submitted.set(Some(feedback_type.clone()));
                        notifications.success(
                            "Feedback submitted",
                            format!("Thank you for your feedback on {}", props.tool),
                        );
                    }
                    Err(e) => {
                        notifications.error("Failed to submit feedback", format!("Error: {}", e));
                    }
                }

                is_submitting.set(false);
            });
        }
    };

    // Feedback button handlers
    let on_thumbs_up = {
        let submit_feedback = submit_feedback.clone();
        Callback::from(move |e: web_sys::MouseEvent| {
            e.stop_propagation();
            submit_feedback("positive".to_string());
        })
    };

    let on_thumbs_down = {
        let submit_feedback = submit_feedback.clone();
        Callback::from(move |e: web_sys::MouseEvent| {
            e.stop_propagation();
            submit_feedback("negative".to_string());
        })
    };

    // Determine card classes based on feedback
    let card_border_class = match &*feedback_submitted {
        Some(ft) if ft == "positive" => "border-green-500 dark:border-green-400",
        Some(ft) if ft == "negative" => "border-red-500 dark:border-red-400",
        _ => "border-gray-200 dark:border-gray-700 hover:border-primary-500 dark:hover:border-primary-400",
    };

    html! {
        <div class={classes!(
            "p-4", "bg-white", "dark:bg-gray-800", "rounded-lg", "border-2",
            "transition-all", "duration-200", "cursor-pointer",
            card_border_class
        )}
        onclick={on_toggle.clone()}
        >
            // Header
            <div class="flex items-start justify-between mb-3">
                <div class="flex items-center gap-3 flex-1">
                    // Rank badge
                    <span class="flex-shrink-0 w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 flex items-center justify-center text-sm font-bold">
                        { props.index }
                    </span>

                    // Title
                    <div class="flex-1 min-w-0">
                        <h4 class="font-semibold text-gray-900 dark:text-white truncate">
                            { &props.skill }
                        </h4>
                        <p class="text-sm text-gray-600 dark:text-gray-400 truncate">
                            { &props.tool }
                        </p>
                    </div>
                </div>

                // Right side: Scores and buttons
                <div class="flex items-center gap-2 ml-4">
                    // Score badge
                    <span class="px-2 py-1 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-mono whitespace-nowrap">
                        { format!("{:.3}", props.score) }
                    </span>

                    // Feedback buttons
                    <div class="flex items-center gap-1">
                        <button
                            class={classes!(
                                "p-1.5", "rounded", "transition-colors",
                                if feedback_submitted.as_ref() == Some(&"positive".to_string()) {
                                    "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300"
                                } else {
                                    "hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400"
                                }
                            )}
                            onclick={on_thumbs_up}
                            disabled={*is_submitting || feedback_submitted.is_some()}
                            title="This result was helpful"
                        >
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
                            </svg>
                        </button>

                        <button
                            class={classes!(
                                "p-1.5", "rounded", "transition-colors",
                                if feedback_submitted.as_ref() == Some(&"negative".to_string()) {
                                    "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300"
                                } else {
                                    "hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400"
                                }
                            )}
                            onclick={on_thumbs_down}
                            disabled={*is_submitting || feedback_submitted.is_some()}
                            title="This result was not helpful"
                        >
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z" />
                            </svg>
                        </button>
                    </div>

                    // Expand icon
                    <svg
                        class={classes!(
                            "w-5", "h-5", "text-gray-400", "transition-transform", "duration-200",
                            if *expanded { "rotate-180" } else { "" }
                        )}
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                    >
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
            </div>

            // Content preview
            <p class={classes!(
                "text-sm", "text-gray-700", "dark:text-gray-300",
                if !*expanded { "line-clamp-2" } else { "" }
            )}>
                { &props.content }
            </p>

            // Expanded details
            if *expanded {
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 space-y-3"
                     onclick={|e: web_sys::MouseEvent| e.stop_propagation()}
                >
                    // Metadata
                    <div class="grid grid-cols-2 gap-4 text-sm">
                        <div>
                            <span class="text-gray-600 dark:text-gray-400">{ "Skill:" }</span>
                            <span class="ml-2 font-medium text-gray-900 dark:text-white">
                                { &props.skill }
                            </span>
                        </div>
                        <div>
                            <span class="text-gray-600 dark:text-gray-400">{ "Tool:" }</span>
                            <span class="ml-2 font-medium text-gray-900 dark:text-white">
                                { &props.tool }
                            </span>
                        </div>
                        <div>
                            <span class="text-gray-600 dark:text-gray-400">{ "Score:" }</span>
                            <span class="ml-2 font-mono text-gray-900 dark:text-white">
                                { format!("{:.6}", props.score) }
                            </span>
                        </div>
                        if let Some(rerank_score) = props.rerank_score {
                            <div>
                                <span class="text-gray-600 dark:text-gray-400">{ "Rerank Score:" }</span>
                                <span class="ml-2 font-mono text-gray-900 dark:text-white">
                                    { format!("{:.6}", rerank_score) }
                                </span>
                            </div>
                        }
                    </div>

                    // Full description
                    <div class="p-3 bg-gray-50 dark:bg-gray-900 rounded text-sm">
                        <p class="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
                            { &props.content }
                        </p>
                    </div>

                    // Action hint
                    <div class="text-xs text-gray-500 dark:text-gray-400 italic">
                        { "Click the card header to collapse" }
                    </div>
                </div>
            }

            // Feedback confirmation
            if let Some(feedback_type) = &*feedback_submitted {
                <div class={classes!(
                    "mt-3", "p-2", "rounded", "text-xs", "flex", "items-center", "gap-2",
                    if feedback_type == "positive" {
                        "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300"
                    } else {
                        "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300"
                    }
                )}>
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                    </svg>
                    { format!("Feedback recorded: {}", if feedback_type == "positive" { "Helpful" } else { "Not helpful" }) }
                </div>
            }
        </div>
    }
}