ask-canvas-web/index.html at main · bilkoh/ask-canvas-web · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ask Canvas</title>
    <link rel="stylesheet" href="main.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      crossorigin="anonymous"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
      rel="stylesheet"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  </head>
  <body>
    <div class="container d-flex align-items-center mt-5 mb-5">
      <h1 class="display-1 text-nowrap me-5">Ask Canvas</h1>
      <p class="lead flex-grow-1 mb-0">
        AskCanvas connects to your Canvas LMS and uses AI to answer questions
        about your classes, assignments, and deadlines, providing personalized
        insights and keeping you organized effortlessly.
      </p>
    </div>

    <!-- Chat container -->
    <div class="container mt-3">
      <div class="card" style="height: 400px">
        <div class="card-body overflow-auto" id="chat-log">
          <div class="mb-2" id="settings-prompt">
            <strong>System:</strong> Welcome! Please review and change your
            settings as needed.
          </div>
        </div>
        <div class="card-footer">
          <form onsubmit="handleSubmit(); return false;">
            <div class="input-group">
              <button
                class="btn btn-primary"
                id="open-settings-button"
                type="button"
              >
                <i class="bi bi-gear"></i> Settings
              </button>
              <input
                type="text"
                class="form-control"
                id="user-input"
                placeholder="Type your message"
              />
              <button class="btn btn-secondary" id="mic-button" type="button">
                <i class="bi bi-mic" id="mic-icon"></i> Text to Speech
              </button>
              <button class="btn btn-primary" id="send-button" type="submit">
                Send
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- Settings Modal -->
    <div
      class="modal fade"
      id="settingsModal"
      tabindex="-1"
      aria-labelledby="settingsModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="settingsModalLabel">
              Change Your Settings
            </h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="settings-form">
              <div class="mb-3">
                <label for="infrastructureHost" class="form-label"
                  >Infrastructure Host</label
                >
                <input
                  type="text"
                  class="form-control"
                  id="infrastructureHost"
                  value="sfsu.instructure.com"
                />
              </div>
              <div class="mb-3">
                <label for="token" class="form-label">Access Token</label>
                <input type="password" class="form-control" id="token" />
                <div id="tokenHelp" class="form-text">
                  You can create a new token in your Canvas profile settings.
                </div>
              </div>
              <!-- Add more settings as needed -->
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
            <button
              type="button"
              class="btn btn-primary"
              id="save-settings-button"
            >
              Save changes
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Status Notification-->
    <div
      id="toast-container"
      class="toast-container position-fixed bottom-0 start-50 translate-middle-x pb-5"
    ></div>

    <!-- Error Alerts -->
    <div id="alert-container" class="mt-3"></div>

    <script src="main.js" defer></script>
    <script src="chat.js" defer></script>
    <script src="settings.js" defer></script>
    <script src="speech.js" defer></script>
  </body>
</html>