Sidekick/sidepanel.html at main · s-revanth/Sidekick · 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
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidekick</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; }
        ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #475569; }
        .loader {
            width: 20px; height: 20px; border: 3px solid #f3f3f3;
            border-top: 3px solid #3498db; border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .icon-btn { transition: background-color 0.2s; }
        .icon-btn:hover { background-color: rgba(0,0,0,0.1); }

        /* Fixed color classes */
        .bg-slate-100 { background-color: #f1f5f9; }
        .bg-slate-200 { background-color: #e2e8f0; }
        .bg-slate-700 { background-color: #334155; }
        .bg-slate-800 { background-color: #1e293b; }
        .bg-slate-900 { background-color: #0f172a; }
        .bg-blue-100 { background-color: #dbeafe; }
        .bg-blue-500 { background-color: #3b82f6; }
        .bg-blue-600 { background-color: #2563eb; }
        .bg-blue-700 { background-color: #1d4ed8; }
        .bg-blue-900 { background-color: #1e3a8a; }
        .bg-red-100 { background-color: #fee2e2; }
        .bg-red-900 { background-color: #7f1d1d; }
        .bg-white { background-color: #ffffff; }
        .bg-slate-50 { background-color: #f8fafc; }
        .bg-purple-500 { background-color: #a855f7; }
        .bg-purple-600 { background-color: #9333ea; }
        .bg-purple-700 { background-color: #7e22ce; }

        .text-white { color: #ffffff; }
        .text-slate-200 { color: #e2e8f0; }
        .text-slate-300 { color: #cbd5e1; }
        .text-slate-400 { color: #94a3b8; }
        .text-slate-500 { color: #64748b; }
        .text-slate-600 { color: #475569; }
        .text-slate-700 { color: #334155; }
        .text-slate-800 { color: #1e293b; }

        .border-slate-200 { border-color: #e2e8f0; }
        .border-slate-300 { border-color: #cbd5e1; }
        .border-slate-600 { border-color: #475569; }
        .border-slate-700 { border-color: #334155; }

        .hover\:bg-slate-200:hover { background-color: #e2e8f0; }
        .hover\:bg-slate-700:hover { background-color: #334155; }
        .hover\:bg-blue-700:hover { background-color: #1d4ed8; }
        .hover\:from-blue-600:hover { background-image: linear-gradient(to right, #2563eb, #2563eb); }
        .hover\:to-blue-700:hover { background-image: linear-gradient(to right, #1d4ed8, #1d4ed8); }
        .hover\:from-purple-600:hover { background-image: linear-gradient(to right, #9333ea, #9333ea); }
        .hover\:to-purple-700:hover { background-image: linear-gradient(to right, #7e22ce, #7e22ce); }

        .focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
        .focus\:ring-blue-500:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
        .focus\:outline-none:focus { outline: none; }

        .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
        .from-blue-500 { --tw-gradient-from: #3b82f6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0)); }
        .to-blue-600 { --tw-gradient-to: #2563eb; }
        .to-purple-600 { --tw-gradient-to: #9333ea; }
        .from-purple-500 { --tw-gradient-from: #a855f7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168, 85, 247, 0)); }

        .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
        .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
        .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
        .hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

        .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .duration-200 { transition-duration: 200ms; }
        .rounded-lg { border-radius: 0.5rem; }
    </style>
</head>
<body class="bg-slate-100 dark:bg-slate-900 text-slate-800 dark:text-slate-200 h-full flex flex-col font-sans">
    <div class="p-3 border-b border-slate-200 dark:border-slate-700 shadow-sm bg-gradient-to-r from-blue-500 to-purple-600">
        <h1 class="text-lg font-bold text-center text-white">Sidekick</h1>
    </div>

    <!-- Chat Messages -->
    <div id="chat-container" class="flex-1 p-4 overflow-y-auto space-y-4">
        <!-- Messages will be injected here -->
    </div>

    <!-- Loading Indicator -->
    <div id="loader-container" class="hidden p-4 flex items-center justify-center">
        <div class="flex items-center space-x-3 bg-white dark:bg-slate-700 rounded-full px-4 py-3 shadow-lg">
            <div class="loader"></div>
            <span class="text-sm font-medium text-slate-700 dark:text-slate-300">Sidekick is analyzing...</span>
        </div>
    </div>

    <!-- Mode Toggle -->
    <div class="mx-4 mb-2 flex items-center justify-center gap-2">
        <button id="content-mode-btn" class="flex-1 p-2 rounded-l-lg font-medium text-xs text-white bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 shadow-sm transition-all duration-200">
            Content Mode
        </button>
        <button id="coding-mode-btn" class="flex-1 p-2 rounded-r-lg font-medium text-xs text-slate-700 dark:text-slate-300 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 shadow-sm transition-all duration-200">
            Coding Mode
        </button>
    </div>

    <!-- Session Info (visible only in coding mode) -->
    <div id="session-info" class="hidden mx-4 mb-2">
        <div class="flex items-center justify-between mb-1">
            <span class="text-xs font-medium text-slate-600 dark:text-slate-400">Current Session:</span>
            <button id="new-session-btn" class="text-xs text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
                New Session
            </button>
        </div>
        <div class="flex items-center gap-2">
            <select id="session-select" class="flex-1 p-1.5 text-xs border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 focus:outline-none focus:ring-1 focus:ring-blue-500">
                <option value="">Select a session</option>
            </select>
        </div>
    </div>

    <!-- Context Status -->
    <div id="context-status" class="mx-4 mb-2 p-3 text-center text-xs bg-blue-100 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg shadow-sm">
        <span class="font-medium">Ready to analyze this page with AI! (Text + Visual)</span>
    </div>

    <!-- Input Form -->
    <div class="p-3 border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800">
        <form id="prompt-form" class="flex items-center gap-2">
            <input type="text" id="prompt-input" placeholder="Ask a question about this page..."
                   class="flex-1 p-3 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm shadow-sm"
                   autocomplete="off">
            <button type="submit" title="Send"
                    class="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white p-3 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 disabled:opacity-50">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"/>
                </svg>
            </button>
            <button id="new-chat-btn" title="New Chat" type="button"
                    class="bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white p-3 rounded-lg shadow-md hover:shadow-lg transition-all duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M11.893 1.123a1 1 0 0 0-1.786 0l-4 7a1 1 0 0 0 .893 1.465h8a1 1 0 0 0 .893-1.465zM5.354 1.146a.5.5 0 1 0-.708 0l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L2.707 5H8.5a.5.5 0 0 0 0-1H2.707l2.647-2.646a.5.5 0 0 0 0-.708m8.5 8.5a.5.5 0 1 0 .708 0l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L13.293 11H7.5a.5.5 0 0 0 0 1h5.793l-2.647 2.646a.5.5 0 0 0 0 .708"/>
                </svg>
            </button>
        </form>
    </div>

    <script src="sidepanel.js"></script>
</body>
</html>