File size: 4,222 Bytes
f884e6e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Source Citations Test - PolicyWise</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="chat.css">
    <link rel="stylesheet" href="chat-enhanced.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="chat-container">
        <header class="chat-header">
            <div class="header-content">
                <h1>PolicyWise - Source Citations Test</h1>
                <p class="subtitle">Testing inline citations and source document viewing</p>
            </div>
        </header>

        <main class="chat-main">
            <div class="messages-container" id="messagesContainer" role="log">
                <!-- Messages will be added here dynamically -->
            </div>

            <div class="input-container">
                <button id="addTestMessage" class="primary-button" style="width: 100%; padding: 12px;">
                    Add Test Message with Citations
                </button>
            </div>
        </main>
    </div>

    <!-- Source document panel -->
    <div id="sourcePanel" class="side-panel source-document-panel" role="dialog" aria-labelledby="sourcePanelHeader" aria-hidden="true">
        <div class="panel-header">
            <h3 id="sourcePanelHeader">Source Document</h3>
            <button id="closeSourcePanel" class="icon-button" aria-label="Close source document">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>
        <div class="panel-body">
            <div id="sourceContent" class="source-document-content">
                <p>Document content will be loaded here.</p>
            </div>
        </div>
    </div>

    <script src="js/chat.js"></script>
    <script>
        // Initialize the chat interface
        const chatInterface = new ChatInterface();

        // Add test message button handler
        document.getElementById('addTestMessage').addEventListener('click', () => {
            const testText = "Based on the provided policy documents, there is no direct information regarding whether employees have Christmas off. However, we can infer from the PTO Policy (HR-POL-002) that the company observes 10 paid holidays per year, which are separate from PTO [Source: pto_policy.md]. Since Christmas is a commonly recognized holiday, it may be one of these paid holidays, but the specific list of observed holidays is not provided in the excerpts.\\n\\nTo determine whether Christmas is a paid holiday and if employees have the day off, you would need to refer to the full list of observed holidays as detailed in the complete PTO Policy (HR-POL-002) document or consult with the Human Resources department for clarification [Source: pto_policy.md]. Unfortunately, with the information provided, I cannot confirm whether Christmas is a day off for employees.";

            const testSources = [
                { filename: 'parental_leave_policy.md', id: 'parental_leave_policy.md' },
                { filename: 'employee_handbook.md', id: 'employee_handbook.md' },
                { filename: 'pto_policy.md', id: 'pto_policy.md' },
                { filename: 'pto_policy.md', id: 'pto_policy.md' } // Duplicate to test deduplication
            ];

            const metadata = {
                sources: testSources,
                confidence: 0.85
            };

            // Add the assistant message with correct parameter order
            chatInterface.addMessage(testText, 'assistant', metadata, true);

            // Scroll to bottom
            setTimeout(() => {
                const container = document.getElementById('messagesContainer');
                container.scrollTop = container.scrollHeight;
            }, 100);
        });
    </script>
</body>
</html>