tmfarrell.github.io/ai-mode.html at master · tmfarrell/tmfarrell.github.io · 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
---
layout: default
title: AI Mode
permalink: /ai-mode/
---

<div class="search-page">
  <div class="back-button-container">
    <a href="{{ '/' | relative_url }}" class="back-button">← Back</a>
  </div>

  <button id="reset-counters-btn" class="reset-counters-btn hidden">Reset Limits</button>
  <button id="near-limit-btn" class="reset-counters-btn hidden">Near Limit</button>

  <div class="search-container" style="margin-top: 50px;">
    <h1 style="font-weight: 300; margin-bottom: 25px;">AI Mode</h1>
    <!--<p class="search-description">Ask about any products I've worked on or things I've written</p>-->

    <div id="chat-messages" class="chat-messages hidden" style="margin-top: 25px;"></div>

    <div class="ai-input-area">
      <form id="search-form" class="ai-form hidden">
        <div class="ai-input-container">
          <textarea
            id="search-query"
            class="ai-input"
            placeholder="Ask anything..."
            maxlength="200"
            rows="1"
            required
          ></textarea>
          <button type="submit" class="ai-btn">
            <span class="ai-btn-text">Send</span>
            <span class="ai-btn-loading" style="display: none;">...</span>
          </button>
        </div>
      </form>

      <form id="chat-form" class="ai-form">
        <div class="ai-input-container">
          <textarea
            id="chat-input"
            class="ai-input"
            placeholder="Ask anything..."
            maxlength="1000"
            rows="1"
          ></textarea>
          <button type="submit" class="ai-btn">
            <span class="ai-btn-text">Send</span>
            <span class="ai-btn-loading" style="display: none;">...</span>
          </button>
        </div>
      </form>

      <div class="suggestions-toggle-wrapper">
        <button id="suggestions-toggle" class="suggestions-toggle" aria-label="Show suggestions">
          <span class="suggestions-toggle-icon">+</span>
          <span class="suggestions-toggle-text">Ideas</span>
        </button>
        <div id="suggestions-wrapper" class="suggestions-wrapper">
          <div id="search-suggestions" class="suggestion-buttons hidden"></div>
          <div id="chat-suggestions" class="suggestion-buttons"></div>
        </div>
      </div>
    </div>

    <div class="mode-toggle">
      <button id="mode-search" class="mode-btn">Search</button>
      <span class="mode-divider">|</span>
      <button id="mode-chat" class="mode-btn active" title="Switch to chat mode">Chat</button>
    </div>

    <div id="search-results" class="search-results hidden" style="margin-top: 25px;"></div>

    <div id="usage-counter" class="usage-counter"></div>
  </div>
</div>

<script src="{{ '/assets/js/search.js' | relative_url }}"></script>
<script src="{{ '/assets/js/chat.js' | relative_url }}"></script>