File size: 1,764 Bytes
d4017c8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
import React from 'react';

const COPY = {
  one_left: {
    title: 'One chat remaining today',
    body: (
      <>
        You have one chat left for today. Contact us at{' '}
        <a href="mailto:info@neon.ai">info@neon.ai</a> if you would like to do
        more with CCAI.
      </>
    ),
  },
  exhausted: {
    title: 'Daily chat limit reached',
    body: (
      <>
        You have used all of your chats for today. Contact us at{' '}
        <a href="mailto:info@neon.ai">info@neon.ai</a> if you would like to do
        more with CCAI.
      </>
    ),
  },
};

/**
 * Modal notice for anonymous / rate-limited users at 1 chat left or
 * when they try to start after the daily cap is exhausted.
 */
export default function RateLimitNotice({ kind, onClose }) {
  if (!kind || !COPY[kind]) return null;
  const { title, body } = COPY[kind];

  return (
    <div
      className="ccai-credentials-overlay"
      role="dialog"
      aria-modal="true"
      aria-labelledby="ccai-rate-limit-title"
      onClick={onClose}
    >
      <div
        className="ccai-credentials-card ccai-rate-limit-card"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="ccai-credentials-header">
          <div>
            <h2 id="ccai-rate-limit-title">{title}</h2>
          </div>
          <div className="ccai-tab-spacer" />
          <button type="button" className="modal-close" onClick={onClose} aria-label="Close">
            &times;
          </button>
        </div>
        <div className="ccai-rate-limit-body">{body}</div>
        <div className="ccai-rate-limit-actions">
          <button type="button" className="btn-primary" onClick={onClose}>
            OK
          </button>
        </div>
      </div>
    </div>
  );
}