coursebot/test_frontend_sources.html at master · happyforever006/coursebot · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <title>Test Source Link Rendering</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-case { margin: 20px 0; padding: 10px; border: 1px solid #ccc; }
        .sources-content { margin: 10px 0; }
        .sources-content a { color: #2563eb; text-decoration: none; }
        .sources-content a:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <h1>Frontend Source Link Rendering Test</h1>

    <div class="test-case">
        <h3>Test 1: Structured Sources with URLs</h3>
        <div id="test1-result" class="sources-content"></div>
    </div>

    <div class="test-case">
        <h3>Test 2: Mixed Sources (some with URLs, some without)</h3>
        <div id="test2-result" class="sources-content"></div>
    </div>

    <div class="test-case">
        <h3>Test 3: Legacy String Sources (backward compatibility)</h3>
        <div id="test3-result" class="sources-content"></div>
    </div>

    <script>
        // Copy the escapeHtml function from our main script
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        // Copy our source formatting logic from the main script
        function formatSources(sources) {
            return sources.map(source => {
                if (typeof source === 'string') {
                    // Legacy string format - just display as text
                    return escapeHtml(source);
                } else if (source && typeof source === 'object' && source.text) {
                    // New structured format with optional URL
                    if (source.url) {
                        // Create clickable link that opens in new tab
                        return `<a href="${escapeHtml(source.url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(source.text)}</a>`;
                    } else {
                        // Just display text if no URL
                        return escapeHtml(source.text);
                    }
                } else {
                    // Fallback for unexpected format
                    return escapeHtml(String(source));
                }
            }).join(', ');
        }

        // Test data
        const test1Sources = [
            {
                "text": "Building Towards Computer Use with Anthropic - Lesson 0",
                "url": "https://learn.deeplearning.ai/courses/building-toward-computer-use-with-anthropic/lesson/a6k0z/introduction"
            },
            {
                "text": "Building Towards Computer Use with Anthropic - Lesson 1",
                "url": "https://learn.deeplearning.ai/courses/building-toward-computer-use-with-anthropic/lesson/b7l1a/lesson1"
            }
        ];

        const test2Sources = [
            {
                "text": "Building Towards Computer Use with Anthropic - Lesson 0",
                "url": "https://learn.deeplearning.ai/courses/building-toward-computer-use-with-anthropic/lesson/a6k0z/introduction"
            },
            {
                "text": "Building Towards Computer Use with Anthropic - General Content"
                // No URL - should display as plain text
            }
        ];

        const test3Sources = [
            "Building Towards Computer Use with Anthropic - Lesson 0",
            "MCP: Build Rich-Context AI Apps with Anthropic - Lesson 1"
        ];

        // Run tests
        document.getElementById('test1-result').innerHTML = formatSources(test1Sources);
        document.getElementById('test2-result').innerHTML = formatSources(test2Sources);
        document.getElementById('test3-result').innerHTML = formatSources(test3Sources);
    </script>
</body>
</html>