chatbot/test-action.html at main · Ankush-Rajpoot/chatbot · 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
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
<!DOCTYPE html>
<html>
<head>
    <title>Test Hasura Action</title>
    <script src="https://unpkg.com/@nhost/nhost-js@latest"></script>
</head>
<body>
    <h1>Test Hasura Action</h1>
    <div>
        <button onclick="signIn()">Sign In First</button>
        <button onclick="testAction()">Test sendMessage Action</button>
        <button onclick="testDirectWebhook()">Test Direct n8n Webhook</button>
    </div>
    <div id="result"></div>

    <script>
        // Initialize Nhost
        const nhost = new NhostClient({
            subdomain: 'wertssqowjrkykmeovsg',
            region: 'ap-south-1'
        });

        async function signIn() {
            const result = document.getElementById('result');
            result.innerHTML = 'Signing in...';

            try {
                const { session, error } = await nhost.auth.signIn({
                    email: 'test@example.com', // You can change this
                    password: 'password123'    // You can change this
                });

                if (error) {
                    result.innerHTML = `<div style="color: red;">Sign in failed: ${error.message}</div>`;
                } else {
                    result.innerHTML = `<div style="color: green;">✅ Signed in successfully!</div>`;
                }
            } catch (error) {
                result.innerHTML = `<div style="color: red;">Sign in error: ${error.message}</div>`;
            }
        }

        async function testAction() {
            const result = document.getElementById('result');
            result.innerHTML = 'Testing...';

            try {
                const accessToken = await nhost.auth.getAccessToken();
                console.log('Access token:', accessToken ? 'Found' : 'Not found');

                if (!accessToken) {
                    result.innerHTML = '<div style="color: red;">❌ No access token found. Please sign in first!</div>';
                    return;
                }

                const response = await fetch('https://wertssqowjrkykmeovsg.hasura.ap-south-1.nhost.run/v1/graphql', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${accessToken}`
                    },
                    body: JSON.stringify({
                        query: `
                            mutation TestSendMessage($chatId: String!, $message: String!) {
                                sendMessage(chat_id: $chatId, message: $message) {
                                    success
                                    message
                                    response
                                }
                            }
                        `,
                        variables: {
                            chatId: "test-chat-id",
                            message: "Hello from test action!"
                        }
                    })
                });

                const data = await response.json();
                console.log('Action test response:', data);

                if (data.errors) {
                    result.innerHTML = `
                        <div style="color: red;">
                            ❌ GraphQL Errors:<br>
                            <pre>${JSON.stringify(data.errors, null, 2)}</pre>
                        </div>
                    `;
                } else if (data.data?.sendMessage) {
                    result.innerHTML = `
                        <div style="color: green;">
                            ✅ Action successful!<br>
                            <pre>${JSON.stringify(data.data.sendMessage, null, 2)}</pre>
                        </div>
                    `;
                } else {
                    result.innerHTML = `
                        <div style="color: orange;">
                            ⚠️ Unexpected response:<br>
                            <pre>${JSON.stringify(data, null, 2)}</pre>
                        </div>
                    `;
                }
            } catch (error) {
                result.innerHTML = `<div style="color: red;">Error: ${error.message}</div>`;
                console.error('Test error:', error);
            }
        }

        async function testDirectWebhook() {
            const result = document.getElementById('result');
            result.innerHTML = 'Testing direct webhook...';

            try {
                const accessToken = await nhost.auth.getAccessToken();
                const user = nhost.auth.getUser();

                const response = await fetch('https://ankushrajpoot.app.n8n.cloud/webhook/chatbot', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${accessToken}`,
                        'x-hasura-user-id': user?.id || 'test-user',
                        'x-hasura-role': 'user'
                    },
                    body: JSON.stringify({
                        input: {
                            chat_id: "test-chat-id",
                            message: "Hello from direct webhook test"
                        },
                        session_variables: {
                            "x-hasura-user-id": user?.id || 'test-user',
                            "x-hasura-role": "user"
                        }
                    })
                });

                const responseText = await response.text();
                console.log('Webhook response status:', response.status);
                console.log('Webhook response body:', responseText);

                let responseData;
                try {
                    responseData = JSON.parse(responseText);
                } catch (parseError) {
                    responseData = responseText;
                }

                result.innerHTML = `
                    <div style="color: ${response.ok ? 'green' : 'red'};">
                        <h3>${response.ok ? '✅' : '❌'} Direct Webhook Test:</h3>
                        <p>Status: ${response.status}</p>
                        <pre>${typeof responseData === 'string' ? responseData : JSON.stringify(responseData, null, 2)}</pre>
                    </div>
                `;
            } catch (error) {
                result.innerHTML = `<div style="color: red;">Webhook Error: ${error.message}</div>`;
                console.error('Webhook test error:', error);
            }
        }
    </script>
</body>
</html>