Skip to content

Commit cb8bc5c

Browse files
mieslepmieslep
committed
adjusting styling
1 parent 7acbc84 commit cb8bc5c

File tree

1 file changed

+111
-52
lines changed

1 file changed

+111
-52
lines changed

‎example.html‎

Lines changed: 111 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -27,64 +27,123 @@
2727
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2828
<title>LangFlow Chat with Managed Sessions</title>
2929
<style>
30-
.chat-container {margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px;}
31-
.chat-header {font-size: 20px; color: #333; margin-bottom: 10px;}
32-
table {width: 100%; margin-top: 20px; border-collapse: collapse;}
33-
th, td {border: 1px solid #ccc; padding: 8px; text-align: left;}
34-
</style>
30+
body {
31+
margin: 0;
32+
padding: 0;
33+
font-family: Arial, sans-serif;
34+
}
35+
36+
.container {
37+
max-width: 1200px;
38+
margin: auto;
39+
padding: 5px 10px;
40+
}
41+
42+
.config-container input, .config-container button {
43+
width: auto;
44+
margin: 5px 5px;
45+
}
46+
47+
.chat-header {
48+
font-size: 20px;
49+
color: #333;
50+
margin-bottom: 10px;
51+
}
52+
53+
.chat-container {
54+
flex: 1 1 auto;
55+
max-width: 330px;
56+
margin: 10px;
57+
padding: 10px;
58+
border: 1px solid #ccc;
59+
border-radius: 5px;
60+
}
61+
62+
th, td {
63+
border: 1px solid #ccc;
64+
padding: 5px;
65+
text-align: left;
66+
}
67+
68+
.chat-container-row {
69+
display: flex;
70+
justify-content: space-between;
71+
flex-wrap: wrap;
72+
}
73+
74+
@media (max-width: 600px) {
75+
.chat-container-row {
76+
flex-direction: column;
77+
}
78+
.chat-container {
79+
flex: 1 1 100%;
80+
}
81+
.container {
82+
padding: 10px;
83+
}
84+
}
85+
</style>
3586
</head>
3687
<body>
37-
<div>
38-
<input type="text" id="hostUrlInput" placeholder="Enter new host URL" value="http://localhost:7860">
39-
<button onclick="updateHostUrl()">Update Host URL</button>
40-
</div>
88+
<div class="container config-container">
89+
<h2>Configuration Settings</h2>
90+
<div>
91+
<input type="text" id="hostUrlInput" placeholder="Enter new host URL" value="http://localhost:7860">
92+
<button onclick="updateHostUrl()">Update Host URL</button>
93+
</div>
94+
95+
<div>
96+
<input type="text" id="labelInput" placeholder="Label for new session">
97+
<button onclick="addSession()">Add Session</button>
98+
</div>
4199

42-
<div>
43-
<input type="text" id="labelInput" placeholder="Label for new session">
44-
<button onclick="addSession()">Add Session</button>
100+
<table id="sessionTable">
101+
<tr>
102+
<th>Label</th>
103+
<th>Session ID</th>
104+
<th>Actions</th>
105+
</tr>
106+
</table>
45107
</div>
46108

47-
<table id="sessionTable">
48-
<tr>
49-
<th>Label</th>
50-
<th>Session ID</th>
51-
<th>Actions</th>
52-
</tr>
53-
</table>
54-
55-
<div class="chat-container">
56-
<div class="chat-header">Pirate Prompt</div>
57-
Session: <select id="pirateChatSelector" onchange="updateSession('langflowPiratePrompt', this.value)"></select>
58-
<langflow-chat
59-
id="langflowPiratePrompt"
60-
window_title="Pirate Prompt"
61-
flow_id="pirate-prompt"
62-
host_url="http://localhost:7860"
63-
></langflow-chat>
109+
<div class="container">
110+
<h2>Chat Sessions</h2>
111+
<div class="chat-container-row">
112+
<div class="chat-container">
113+
<div class="chat-header">Pirate Prompt</div>
114+
Session: <select id="pirateChatSelector" onchange="updateSession('langflowPiratePrompt', this.value)"></select>
115+
<langflow-chat
116+
id="langflowPiratePrompt"
117+
window_title="Pirate Prompt"
118+
flow_id="pirate-prompt"
119+
host_url="http://localhost:7860"
120+
></langflow-chat>
121+
</div>
122+
123+
<div class="chat-container">
124+
<div class="chat-header">Basic Memory Chat</div>
125+
Session: <select id="basicMemoryChatSelector" onchange="updateSession('langflowBasicMemoryChat', this.value)"></select>
126+
<langflow-chat
127+
id="langflowBasicMemoryChat"
128+
window_title="Basic Memory Chat"
129+
flow_id="basic-memory-chatbot"
130+
host_url="http://localhost:7860"
131+
></langflow-chat>
132+
</div>
133+
134+
<div class="chat-container">
135+
<div class="chat-header">Astra Memory Chat</div>
136+
Session: <select id="astraMemoryChatSelector" onchange="updateSession('langflowAstraMemoryChat', this.value)"></select>
137+
<langflow-chat
138+
id="langflowAstraMemoryChat"
139+
window_title="Astra Memory Chat"
140+
flow_id="astra-memory-chatbot"
141+
host_url="http://localhost:7860"
142+
></langflow-chat>
143+
</div>
144+
</div>
64145
</div>
65-
66-
<div class="chat-container">
67-
<div class="chat-header">Basic Memory Chat</div>
68-
Session: <select id="basicMemoryChatSelector" onchange="updateSession('langflowBasicMemoryChat', this.value)"></select>
69-
<langflow-chat
70-
id="langflowBasicMemoryChat"
71-
window_title="Basic Memory Chat"
72-
flow_id="basic-memory-chatbot"
73-
host_url="http://localhost:7860"
74-
></langflow-chat>
75-
</div>
76-
77-
<div class="chat-container">
78-
<div class="chat-header">Astra Memory Chat</div>
79-
Session: <select id="astraMemoryChatSelector" onchange="updateSession('langflowAstraMemoryChat', this.value)"></select>
80-
<langflow-chat
81-
id="langflowAstraMemoryChat"
82-
window_title="Astra Memory Chat"
83-
flow_id="astra-memory-chatbot"
84-
host_url="http://localhost:7860"
85-
></langflow-chat>
86-
</div>
87-
146+
88147
<script src="https://cdn.jsdelivr.net/npm/uuid@8.3.2/dist/umd/uuid.min.js"></script>
89148
<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@v1.0.5/dist/build/static/js/bundle.min.js"></script>
90149
<script>

0 commit comments

Comments
 (0)