Skip to content

Commit 18c79cd

Browse files
gkorlandgkorland
committed
refactor j2 file
1 parent e243ade commit 18c79cd

File tree

15 files changed

+300
-207
lines changed

15 files changed

+300
-207
lines changed

‎api/__init__.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
"""Text2SQL API package."""

‎api/templates/base.j2‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>{% block title %}Chatbot Interface{% endblock %}</title>
7+
<link rel="stylesheet" href="{{ url_for('static', filename='css/chat.css') }}">
8+
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
9+
{% block extra_css %}{% endblock %}
10+
</head>
11+
<body>
12+
{% block toolbar %}{% endblock %}
13+
14+
{% block content %}{% endblock %}
15+
16+
{% block modals %}{% endblock %}
17+
18+
{% block scripts %}
19+
{# Set authentication state for JS #}
20+
<script>
21+
window.isAuthenticated = {{ 'true' if is_authenticated else 'false' }};
22+
{% if user_info %}
23+
window.currentUser = {
24+
name: "{{ user_info.name|e }}",
25+
email: "{{ user_info.email|e }}",
26+
picture: "{{ user_info.picture|e }}"
27+
};
28+
{% else %}
29+
window.currentUser = null;
30+
{% endif %}
31+
</script>
32+
{% endblock %}
33+
</body>
34+
</html>

‎api/templates/chat.j2‎

Lines changed: 33 additions & 207 deletions
Original file line numberDiff line numberDiff line change
@@ -1,214 +1,40 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
1+
{% extends "base.j2" %}
32

4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Chatbot Interface</title>
8-
<link rel="stylesheet" href="{{ url_for('static', filename='css/chat.css') }}">
9-
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
10-
</head>
3+
{% block title %}Text-to-SQL Chat Interface{% endblock %}
114

12-
<body>
13-
<!-- Theme Toggle Button -->
14-
<button id="theme-toggle-btn" class="action-button" title="Toggle Theme">
15-
<svg class="theme-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
16-
<!-- Sun icon -->
17-
<circle class="sun" cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2"/>
18-
<path class="sun" d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="currentColor" stroke-width="2"/>
19-
<!-- Moon icon -->
20-
<path class="moon" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2" fill="currentColor"/>
21-
<!-- System icon - Split circle icon - half white, half dark -->
22-
<defs>
23-
<clipPath id="leftHalf">
24-
<rect x="0" y="0" width="12" height="24"/>
25-
</clipPath>
26-
<clipPath id="rightHalf">
27-
<rect x="12" y="0" width="12" height="24"/>
28-
</clipPath>
29-
</defs>
30-
<!-- Dark half (left) -->
31-
<circle class="system" cx="12" cy="12" r="8" fill="currentColor" clip-path="url(#leftHalf)"/>
32-
<!-- Light half (right) -->
33-
<circle class="system" cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2" clip-path="url(#rightHalf)"/>
34-
<!-- Circle outline -->
35-
<circle class="system" cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2"/>
36-
</svg>
5+
{% block toolbar %}
6+
{% include 'components/toolbar.j2' %}
7+
{% endblock %}
8+
9+
{% block content %}
10+
<div id="container">
11+
{% include 'components/sidebar_menu.j2' %}
12+
13+
<div id="chat-container" class="chat-container">
14+
<button class="action-button" id="side-menu-button" title="Open Menu">
15+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
16+
<path d="M22 19.7333V12.2667C22 11.9556 21.8667 11.7444 21.6 11.6333C21.3333 11.5222 21.0889 11.5778 20.8667 11.8L17.6 15.0667C17.3333 15.3333 17.2 15.6444 17.2 16C17.2 16.3556 17.3333 16.6667 17.6 16.9333L20.8667 20.2C21.0889 20.4222 21.3333 20.4778 21.6 20.3667C21.8667 20.2556 22 20.0444 22 19.7333ZM6.66667 28C5.93333 28 5.30578 27.7391 4.784 27.2173C4.26222 26.6956 4.00089 26.0676 4 25.3333V6.66667C4 5.93333 4.26133 5.30578 4.784 4.784C5.30667 4.26222 5.93422 4.00089 6.66667 4H25.3333C26.0667 4 26.6947 4.26133 27.2173 4.784C27.74 5.30667 28.0009 5.93422 28 6.66667V25.3333C28 26.0667 27.7391 26.6947 27.2173 27.2173C26.6956 27.74 26.0676 28.0009 25.3333 28H6.66667ZM13.3333 25.3333H25.3333V6.66667H13.3333V25.3333Z" fill="currentColor"/>
17+
</svg>
3718
</button>
3819

39-
<!-- GitHub Link Button -->
40-
<a href="https://github.com/FalkorDB/QueryWeaver" target="_blank" class="github-link" id="github-link-btn" title="View QueryWeaver on GitHub">
41-
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
42-
<path d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
43-
</svg>
44-
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="margin-left: 4px;">
45-
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
46-
</svg>
47-
<span id="github-stars" style="margin-left: 2px; font-size: 12px;">-</span>
48-
</a>
49-
{% if is_authenticated and user_info %}
50-
<button id="user-profile-btn" class="user-profile-btn" title="{{ user_info.name }}">
51-
<img src="{{ user_info.picture }}" alt="{{ user_info.name[0] | upper }}" class="user-profile-img">
52-
</button>
53-
<div id="user-profile-dropdown" class="user-profile-dropdown">
54-
<div class="user-profile-info">
55-
<div class="user-profile-name">{{ user_info.name }}</div>
56-
<div class="user-profile-email">{{ user_info.email }}</div>
57-
</div>
58-
<div class="user-profile-actions">
59-
<button onclick="window.location.href='/logout'" class="user-profile-logout">Logout</button>
60-
</div>
61-
</div>
62-
{% endif %}
63-
<div id="container">
64-
<div id="menu-container">
65-
<div id="menu-header">
66-
<button class="action-button" id="menu-button" title="Close Menu">
67-
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
68-
<path d="M22 19.7333V12.2667C22 11.9556 21.8667 11.7444 21.6 11.6333C21.3333 11.5222 21.0889 11.5778 20.8667 11.8L17.6 15.0667C17.3333 15.3333 17.2 15.6444 17.2 16C17.2 16.3556 17.3333 16.6667 17.6 16.9333L20.8667 20.2C21.0889 20.4222 21.3333 20.4778 21.6 20.3667C21.8667 20.2556 22 20.0444 22 19.7333ZM6.66667 28C5.93333 28 5.30578 27.7391 4.784 27.2173C4.26222 26.6956 4.00089 26.0676 4 25.3333V6.66667C4 5.93333 4.26133 5.30578 4.784 4.784C5.30667 4.26222 5.93422 4.00089 6.66667 4H25.3333C26.0667 4 26.6947 4.26133 27.2173 4.784C27.74 5.30667 28.0009 5.93422 28 6.66667V25.3333C28 26.0667 27.7391 26.6947 27.2173 27.2173C26.6956 27.74 26.0676 28.0009 25.3333 28H6.66667ZM13.3333 25.3333H25.3333V6.66667H13.3333V25.3333Z" fill="currentColor" />
69-
</svg>
70-
</button>
71-
</div>
72-
<div id="menu-content">
73-
<div class="menu-item" id="instructions-container">
74-
<h2>INSTRUCTIONS</h2>
75-
<textarea class="menu-value" id="instructions-textarea"
76-
placeholder="Enter your instructions for the generator..."></textarea>
77-
</div>
78-
<div class="horizontal-separator"></div>
79-
<div class="menu-item" id="conf-container">
80-
<h2>CONFIDENCE VALUE</h2>
81-
<p class="menu-value" id="conf-value">0%</p>
82-
</div>
83-
<div class="menu-item" id="exp-container">
84-
<h2>EXPLANATION</h2>
85-
<div class="menu-value" id="exp-value"></div>
86-
</div>
87-
<div class="menu-item" id="info-container">
88-
<h2>MISSING INFORMATION</h2>
89-
<div class="menu-value" id="info-value"></div>
90-
</div>
91-
<div class="menu-item" id="amb-container">
92-
<h2>AMBIGUITY</h2>
93-
<div class="menu-value" id="amb-value"></div>
94-
</div>
95-
</div>
96-
<div id="menu-footer">
97-
<p id="rights-reserved">All Rights Reserved (c) FalkorDB 2025 | <a class="link"
98-
href="https://falkordb.com" target="_blank">falkordb.com</a></p>
99-
</div>
100-
</div>
101-
<div id="chat-container" class="chat-container">
102-
<button class="action-button" id="side-menu-button" title="Open Menu">
103-
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
104-
<path d="M22 19.7333V12.2667C22 11.9556 21.8667 11.7444 21.6 11.6333C21.3333 11.5222 21.0889 11.5778 20.8667 11.8L17.6 15.0667C17.3333 15.3333 17.2 15.6444 17.2 16C17.2 16.3556 17.3333 16.6667 17.6 16.9333L20.8667 20.2C21.0889 20.4222 21.3333 20.4778 21.6 20.3667C21.8667 20.2556 22 20.0444 22 19.7333ZM6.66667 28C5.93333 28 5.30578 27.7391 4.784 27.2173C4.26222 26.6956 4.00089 26.0676 4 25.3333V6.66667C4 5.93333 4.26133 5.30578 4.784 4.784C5.30667 4.26222 5.93422 4.00089 6.66667 4H25.3333C26.0667 4 26.6947 4.26133 27.2173 4.784C27.74 5.30667 28.0009 5.93422 28 6.66667V25.3333C28 26.0667 27.7391 26.6947 27.2173 27.2173C26.6956 27.74 26.0676 28.0009 25.3333 28H6.66667ZM13.3333 25.3333H25.3333V6.66667H13.3333V25.3333Z" fill="currentColor"/>
105-
</svg>
106-
</button>
107-
<div class="chat-header">
108-
<img src="{{ url_for('static', filename='public/icons/logo.svg') }}" alt="Chat Logo" class="logo">
109-
<h1> Text-to-SQL(Natural Language to SQL Generator)</h1>
110-
<div class="button-container">
111-
<select title="Select Database" id="graph-select">
112-
<option value="">Loading...</option>
113-
</select>
114-
<div class="vertical-separator"></div>
115-
<input title="Upload Schema" id="schema-upload" type="file" accept=".json" style="display: none;" tabindex="-1" />
116-
<label for="schema-upload" id="custom-file-upload">
117-
Upload Schema
118-
</label>
119-
<div class="vertical-separator"></div>
120-
<label id="open-pg-modal">
121-
Connect Postgres
122-
</label>
123-
</div>
124-
</div>
125-
<div class="chat-messages" id="chat-messages">
126-
</div>
127-
<div class="chat-input">
128-
<div class="input-container" id="input-container">
129-
<input type="text" id="message-input" placeholder="Describe the SQL query you want..." />
130-
<button class="input-button" title="Submit" id="submit-button">
131-
<img src="{{ url_for('static', filename='public/icons/submit.svg') }}" alt="Submit">
132-
</button>
133-
<button class="input-button" title="Pause" id="pause-button">
134-
<img src="{{ url_for('static', filename='public/icons/pause.svg') }}" alt="Pause">
135-
</button>
136-
<button id="reset-button" class="action-button" title="Reset session">
137-
<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
138-
<path fill="none" stroke="currentColor" stroke-width="2" d="M20,8 C18.5974037,5.04031171 15.536972,3 12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 L12,21 C16.9705627,21 21,16.9705627 21,12 M21,3 L21,9 L15,9"/>
139-
</svg>
140-
</button>
141-
</div>
142-
</div>
143-
</div>
144-
</div>
145-
<div id="gradient"></div>
146-
<div id="google-login-modal" class="google-login-modal">
147-
<div class="google-login-modal-content">
148-
<h2>Welcome to Text-to-SQL</h2>
149-
<p>Please login to continue</p>
150-
<a href="{{ url_for('google.login') }}" class="google-login-btn">
151-
<img src="{{ url_for('static', filename='public/icons/google.svg') }}" alt="Google logo" class="google-login-logo">Sign in with Google
152-
</a>
153-
<a href="{{ url_for('github.login') }}" class="github-login-btn" style="margin-top: 0.5em;">
154-
<img src="{{ url_for('static', filename='public/icons/github.svg') }}" alt="GitHub logo" class="github-login-logo">Sign in with GitHub
155-
</a>
156-
</div>
157-
</div>
158-
<div id="pg-modal" class="pg-modal">
159-
<div class="pg-modal-content">
160-
<h2 class="pg-modal-title">Connect to Postgres</h2>
161-
<input type="text" id="pg-url-input" class="pg-modal-input" placeholder="postgres://user:pass@host:port/db" />
162-
<div class="pg-modal-actions">
163-
<button id="pg-modal-connect" class="pg-modal-btn pg-modal-connect">
164-
<span class="pg-modal-connect-text">Connect</span>
165-
<span class="pg-modal-loading-spinner" style="display: none;">
166-
<span class="spinner"></span>
167-
Loading Schema...
168-
</span>
169-
</button>
170-
<button id="pg-modal-cancel" class="pg-modal-btn pg-modal-cancel">Cancel</button>
171-
</div>
172-
</div>
173-
</div>
174-
<div id="reset-confirmation-modal" class="reset-confirmation-modal">
175-
<div class="reset-confirmation-modal-content">
176-
<h3>Reset Session</h3>
177-
<p>Are you sure you want to reset the current session? This will clear all chat history and start a new conversation.</p>
178-
<div class="confirmation-buttons">
179-
<button id="reset-confirm-btn" class="confirm-btn">Reset Session</button>
180-
<button id="reset-cancel-btn" class="cancel-btn">Cancel</button>
181-
</div>
20+
{% include 'components/chat_header.j2' %}
21+
22+
<div class="chat-messages" id="chat-messages">
18223
</div>
24+
25+
{% include 'components/chat_input.j2' %}
18326
</div>
184-
{# Set authentication state for JS before loading chat.js #}
185-
<script>
186-
window.isAuthenticated = {{ 'true' if is_authenticated else 'false' }};
187-
{% if user_info %}
188-
window.currentUser = {
189-
name: "{{ user_info.name|e }}",
190-
email: "{{ user_info.email|e }}",
191-
picture: "{{ user_info.picture|e }}"
192-
};
193-
{% else %}
194-
window.currentUser = null;
195-
{% endif %}
196-
197-
// Fetch GitHub stars for QueryWeaver repo
198-
fetch('https://api.github.com/repos/FalkorDB/QueryWeaver')
199-
.then(response => response.json())
200-
.then(data => {
201-
const starsElement = document.getElementById('github-stars');
202-
if (starsElement && data.stargazers_count !== undefined) {
203-
starsElement.textContent = data.stargazers_count.toLocaleString();
204-
}
205-
})
206-
.catch(error => {
207-
console.log('Failed to fetch GitHub stars:', error);
208-
// Keep the default '-' if fetch fails
209-
});
210-
</script>
211-
<script src="{{ url_for('static', filename='js/chat.js') }}"></script>
212-
</body>
27+
</div>
28+
<div id="gradient"></div>
29+
{% endblock %}
30+
31+
{% block modals %}
32+
{% include 'components/login_modal.j2' %}
33+
{% include 'components/postgres_modal.j2' %}
34+
{% include 'components/reset_modal.j2' %}
35+
{% endblock %}
21336

214-
</html>
37+
{% block scripts %}
38+
{{ super() }}
39+
{% include 'components/scripts.j2' %}
40+
{% endblock %}

‎api/templates/chat_new.j2‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{% extends "base.j2" %}
2+
3+
{% block title %}Text-to-SQL Chat Interface{% endblock %}
4+
5+
{% block toolbar %}
6+
{% include 'components/toolbar.j2' %}
7+
{% endblock %}
8+
9+
{% block content %}
10+
<div id="container">
11+
{% include 'components/sidebar_menu.j2' %}
12+
13+
<div id="chat-container" class="chat-container">
14+
<button class="action-button" id="side-menu-button" title="Open Menu">
15+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
16+
<path d="M22 19.7333V12.2667C22 11.9556 21.8667 11.7444 21.6 11.6333C21.3333 11.5222 21.0889 11.5778 20.8667 11.8L17.6 15.0667C17.3333 15.3333 17.2 15.6444 17.2 16C17.2 16.3556 17.3333 16.6667 17.6 16.9333L20.8667 20.2C21.0889 20.4222 21.3333 20.4778 21.6 20.3667C21.8667 20.2556 22 20.0444 22 19.7333ZM6.66667 28C5.93333 28 5.30578 27.7391 4.784 27.2173C4.26222 26.6956 4.00089 26.0676 4 25.3333V6.66667C4 5.93333 4.26133 5.30578 4.784 4.784C5.30667 4.26222 5.93422 4.00089 6.66667 4H25.3333C26.0667 4 26.6947 4.26133 27.2173 4.784C27.74 5.30667 28.0009 5.93422 28 6.66667V25.3333C28 26.0667 27.7391 26.6947 27.2173 27.2173C26.6956 27.74 26.0676 28.0009 25.3333 28H6.66667ZM13.3333 25.3333H25.3333V6.66667H13.3333V25.3333Z" fill="currentColor"/>
17+
</svg>
18+
</button>
19+
20+
{% include 'components/chat_header.j2' %}
21+
22+
<div class="chat-messages" id="chat-messages">
23+
</div>
24+
25+
{% include 'components/chat_input.j2' %}
26+
</div>
27+
</div>
28+
<div id="gradient"></div>
29+
{% endblock %}
30+
31+
{% block modals %}
32+
{% include 'components/login_modal.j2' %}
33+
{% include 'components/postgres_modal.j2' %}
34+
{% include 'components/reset_modal.j2' %}
35+
{% endblock %}
36+
37+
{% block scripts %}
38+
{{ super() }}
39+
{% include 'components/scripts.j2' %}
40+
{% endblock %}

‎api/templates/components/chat_header.j2‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{# Chat header with logo, title, and action buttons #}
2+
<div class="chat-header">
3+
<img src="{{ url_for('static', filename='public/icons/logo.svg') }}" alt="Chat Logo" class="logo">
4+
<h1> Text-to-SQL(Natural Language to SQL Generator)</h1>
5+
<div class="button-container">
6+
<select title="Select Database" id="graph-select">
7+
<option value="">Loading...</option>
8+
</select>
9+
<div class="vertical-separator"></div>
10+
<input title="Upload Schema" id="schema-upload" type="file" accept=".json" style="display: none;" tabindex="-1" />
11+
<label for="schema-upload" id="custom-file-upload">
12+
Upload Schema
13+
</label>
14+
<div class="vertical-separator"></div>
15+
<label id="open-pg-modal">
16+
Connect Postgres
17+
</label>
18+
</div>
19+
</div>

0 commit comments

Comments
 (0)