nirbarazida
/
promptfoo
mirror of https://github.com/promptfoo/promptfoo


  
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

	
            <!doctype html>
<html>
  <head>
    <title>Test Chat Interface</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }
      #user-info {
        background: #f0f0f0;
        padding: 10px;
        margin-bottom: 20px;
        border-radius: 5px;
      }
      #chat-container {
        border: 1px solid #ccc;
        padding: 20px;
        min-height: 300px;
        margin-bottom: 20px;
      }
      .chat-message {
        margin: 10px 0;
        padding: 10px;
        background: #e9e9e9;
        border-radius: 5px;
      }
      .message-content {
        margin-top: 5px;
      }
      #chat-input {
        width: 70%;
        padding: 10px;
        font-size: 16px;
      }
      #send-button {
        padding: 10px 20px;
        font-size: 16px;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }
      [data-testid='user-avatar'] {
        display: inline-block;
        width: 40px;
        height: 40px;
        background: #007bff;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div id="user-info">
      <span data-testid="user-avatar">JD</span>
      <strong>Logged in as:</strong> John Doe (john.doe@example.com)
    </div>

    <h1>Test Chat Interface</h1>

    <div id="chat-container">
      <div class="chat-message">
        <strong>System:</strong>
        <div class="message-content">Welcome! You are authenticated and can start chatting.</div>
      </div>
    </div>

    <div>
      <input type="text" id="chat-input" placeholder="Type your message..." />
      <button id="send-button">Send</button>
    </div>

    <script>
      // Simple chat simulation
      document.getElementById('send-button').addEventListener('click', function () {
        const input = document.getElementById('chat-input');
        const message = input.value.trim();

        if (message) {
          // Add user message
          const userMsg = document.createElement('div');
          userMsg.className = 'chat-message';

          const userLabel = document.createElement('strong');
          userLabel.textContent = 'You:';
          userMsg.appendChild(userLabel);

          const userContent = document.createElement('div');
          userContent.className = 'message-content';
          userContent.textContent = message;
          userMsg.appendChild(userContent);

          document.getElementById('chat-container').appendChild(userMsg);

          // Simulate bot response
          setTimeout(() => {
            const botMsg = document.createElement('div');
            botMsg.className = 'chat-message';

            let response = '';
            if (message.toLowerCase().includes('who am i')) {
              response =
                'You are logged in as John Doe (john.doe@example.com). You have authenticated access to this chat system.';
            } else if (message.toLowerCase().includes('status')) {
              response =
                'Your account status is: Active. Premium subscription valid until 2025-12-31.';
            } else if (message.toLowerCase().includes('activity')) {
              response = 'Your recent activity: Last login 2 hours ago. 5 conversations today.';
            } else if (message.toLowerCase().includes('permission')) {
              response = 'You have the following permissions: chat.read, chat.write, profile.edit';
            } else if (message.toLowerCase().includes('other user')) {
              response = "Error: You cannot access other users' private data. Permission denied.";
            } else {
              response = 'I received your message: "' + message + '". How can I help you today?';
            }

            const botLabel = document.createElement('strong');
            botLabel.textContent = 'Assistant:';
            botMsg.appendChild(botLabel);

            const botContent = document.createElement('div');
            botContent.className = 'message-content';
            botContent.textContent = response;
            botMsg.appendChild(botContent);

            document.getElementById('chat-container').appendChild(botMsg);
          }, 500);

          input.value = '';
        }
      });

      // Allow Enter key to send
      document.getElementById('chat-input').addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
          document.getElementById('send-button').click();
        }
      });
    </script>
  </body>
</html>