Skip to content

Commit 767bcb8

Browse files
andreibondarevandreibondarev
committed
wip
1 parent a508707 commit 767bcb8

File tree

8 files changed

+299
-41
lines changed

8 files changed

+299
-41
lines changed

‎lib/langchainrb_rails/generators/langchainrb_rails/assistant_generator.rb‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,11 @@ def add_routes
7171
EOS
7272
end
7373

74+
def copy_stylesheets
75+
template "assistant/stylesheets/chat.css", "app/assets/stylesheets/chat.css"
76+
end
77+
78+
# TODO: Do we need to add turbo-rails to the gemfile?
7479
# TODO: Depending on the LLM provider, we may need to add additional gems
7580
# def add_to_gemfile
7681
# end

‎lib/langchainrb_rails/generators/langchainrb_rails/templates/assistant/controllers/assistants_controller.rb‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,22 @@ def create
2121
def show
2222
@assistant = Assistant.find(params[:id])
2323
@messages = @assistant.messages
24+
@message = Message.new
2425
end
2526

2627
def chat
2728
@assistant = Assistant.find(params[:id])
28-
message = @assistant.messages.create(role: 'user', content: params[:content])
29-
29+
@message = @assistant.messages.create(role: 'user', content: params[:message][:content])
30+
3031
langchain_assistant = Langchain::Assistant.load(@assistant.id)
31-
response = langchain_assistant.chat(params[:content])
32-
33-
@assistant.messages.create(role: 'assistant', content: response.content)
34-
35-
render json: { message: message, response: response.content }
32+
messages = langchain_assistant.add_message_and_run!(content: params[:message][:content])
33+
response = messages.last
34+
35+
@response = @assistant.messages.create(role: 'assistant', content: response.content)
36+
37+
respond_to do |format|
38+
format.turbo_stream
39+
end
3640
end
3741

3842
private

‎lib/langchainrb_rails/generators/langchainrb_rails/templates/assistant/stylesheets/chat.css‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
.chat-container {
2+
max-width: 1000px;
3+
margin: 0 auto;
4+
padding: 20px;
5+
font-family: Arial, sans-serif;
6+
}
7+
8+
.chat-header {
9+
text-align: center;
10+
color: #333;
11+
margin-bottom: 20px;
12+
}
13+
14+
.chat-messages {
15+
display: flex;
16+
flex-direction: column;
17+
gap: 10px;
18+
margin-bottom: 20px;
19+
height: 500px;
20+
overflow-y: auto;
21+
padding: 15px;
22+
border: 1px solid #ddd;
23+
border-radius: 8px;
24+
background-color: #f9f9f9;
25+
}
26+
27+
.message {
28+
max-width: 80%;
29+
padding: 10px 15px;
30+
border-radius: 12px;
31+
line-height: 1.4;
32+
}
33+
34+
.message.user {
35+
align-self: flex-end;
36+
background-color: #007bff;
37+
color: white;
38+
}
39+
40+
.message.assistant {
41+
align-self: flex-start;
42+
background-color: #e9e9e9;
43+
color: #333;
44+
}
45+
46+
.chat-form {
47+
display: flex;
48+
gap: 10px;
49+
}
50+
51+
.chat-input {
52+
flex-grow: 1;
53+
padding: 12px 15px;
54+
border: 1px solid #ccc;
55+
border-radius: 8px;
56+
font-size: 16px;
57+
transition: border-color 0.3s ease;
58+
}
59+
60+
.chat-input:focus {
61+
outline: none;
62+
border-color: #007bff;
63+
}
64+
65+
.chat-submit {
66+
padding: 12px 25px;
67+
background-color: #007bff;
68+
color: white;
69+
border: none;
70+
border-radius: 8px;
71+
cursor: pointer;
72+
font-size: 16px;
73+
font-weight: bold;
74+
transition: background-color 0.3s ease, transform 0.1s ease;
75+
}
76+
77+
.chat-submit:hover {
78+
background-color: #0056b3;
79+
}
80+
81+
.chat-submit:active {
82+
transform: scale(0.98);
83+
}
84+
85+
.assistant-form-container {
86+
max-width: 600px;
87+
margin: 0 auto;
88+
padding: 20px;
89+
background-color: #f9f9f9;
90+
border-radius: 8px;
91+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
92+
}
93+
94+
.form-header {
95+
text-align: center;
96+
color: #333;
97+
margin-bottom: 20px;
98+
}
99+
100+
.assistant-form {
101+
display: flex;
102+
flex-direction: column;
103+
gap: 20px;
104+
}
105+
106+
.form-group {
107+
display: flex;
108+
flex-direction: column;
109+
gap: 5px;
110+
}
111+
112+
.form-group label {
113+
font-weight: bold;
114+
color: #555;
115+
}
116+
117+
.form-group textarea {
118+
padding: 10px;
119+
border: 1px solid #ccc;
120+
border-radius: 4px;
121+
font-size: 16px;
122+
resize: vertical;
123+
}
124+
125+
.form-group textarea:focus {
126+
outline: none;
127+
border-color: #007bff;
128+
}
129+
130+
.form-actions {
131+
display: flex;
132+
justify-content: space-between;
133+
align-items: center;
134+
}
135+
136+
.submit-button {
137+
padding: 10px 20px;
138+
background-color: #007bff;
139+
color: white;
140+
border: none;
141+
border-radius: 4px;
142+
cursor: pointer;
143+
font-size: 16px;
144+
font-weight: bold;
145+
transition: background-color 0.3s ease;
146+
}
147+
148+
.submit-button:hover {
149+
background-color: #0056b3;
150+
}
151+
152+
.back-link {
153+
color: #007bff;
154+
text-decoration: none;
155+
font-weight: bold;
156+
transition: color 0.3s ease;
157+
}
158+
159+
.back-link:hover {
160+
color: #0056b3;
161+
text-decoration: underline;
162+
}
163+
164+
.error-messages {
165+
background-color: #ffebee;
166+
border: 1px solid #ffcdd2;
167+
border-radius: 4px;
168+
padding: 10px;
169+
margin-bottom: 20px;
170+
color: #b71c1c;
171+
}
172+
173+
.error-messages h2 {
174+
font-size: 18px;
175+
margin-bottom: 10px;
176+
}
177+
178+
.error-messages ul {
179+
padding-left: 20px;
180+
}
181+
182+
.assistant-list-container {
183+
max-width: 800px;
184+
margin: 0 auto;
185+
padding: 20px;
186+
}
187+
188+
.list-header {
189+
text-align: center;
190+
color: #333;
191+
margin-bottom: 20px;
192+
}
193+
194+
.new-assistant-link {
195+
display: inline-block;
196+
margin-bottom: 20px;
197+
padding: 10px 20px;
198+
background-color: #007bff;
199+
color: white;
200+
text-decoration: none;
201+
border-radius: 4px;
202+
transition: background-color 0.3s ease;
203+
}
204+
205+
.new-assistant-link:hover {
206+
background-color: #0056b3;
207+
}
208+
209+
.assistant-list {
210+
list-style-type: none;
211+
padding: 0;
212+
}
213+
214+
.assistant-item {
215+
margin-bottom: 10px;
216+
padding: 10px;
217+
background-color: #f9f9f9;
218+
border-radius: 4px;
219+
transition: background-color 0.3s ease;
220+
}
221+
222+
.assistant-item:hover {
223+
background-color: #e9e9e9;
224+
}
225+
226+
.assistant-link {
227+
color: #333;
228+
text-decoration: none;
229+
display: block;
230+
}

‎lib/langchainrb_rails/generators/langchainrb_rails/templates/assistant/views/_message.html.erb‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div id="<%= dom_id message %>" class="message <%= message.role %>">
2+
<div class="message-content">
3+
<%= message.content %>
4+
</div>
5+
</div>

‎lib/langchainrb_rails/generators/langchainrb_rails/templates/assistant/views/_message_form.html.erb‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<%= form_with(model: [@assistant, Message.new], url: chat_assistant_path(@assistant), method: :post, class: "chat-form") do |form| %>
2+
<%= form.text_area :content, class: "chat-input", placeholder: "Type your message..." %>
3+
<%= form.submit 'Send', class: "chat-submit" %>
4+
<% end %>

‎lib/langchainrb_rails/generators/langchainrb_rails/templates/assistant/views/index.html.erb‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
<h1>Assistants</h1>
1+
<div class="assistant-list-container">
2+
<h1 class="list-header">Assistants</h1>
23

3-
<%%= link_to 'New Assistant', new_assistant_path %>
4+
<%= link_to 'Create New Assistant', new_assistant_path, class: "new-assistant-link" %>
45

5-
<ul>
6-
<%% @assistants.each do |assistant| %>
7-
<li><%%= link_to assistant.instructions, assistant_path(assistant) %></li>
8-
<%% end %>
9-
</ul>
6+
<ul class="assistant-list">
7+
<% @assistants.each do |assistant| %>
8+
<li class="assistant-item">
9+
<%= link_to assistant.instructions, assistant_path(assistant), class: "assistant-link" %>
10+
</li>
11+
<% end %>
12+
</ul>
13+
</div>

‎lib/langchainrb_rails/generators/langchainrb_rails/templates/assistant/views/new.html.erb‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,26 @@
1-
<h1>New Assistant</h1>
1+
<div class="assistant-form-container">
2+
<h1 class="form-header">Create New Assistant</h1>
23

3-
<%%= form_with(model: @assistant, local: true) do |form| %>
4-
<div>
5-
<%%= form.label :instructions %>
6-
<%%= form.text_area :instructions %>
7-
</div>
4+
<%= form_with(model: @assistant, local: true, class: "assistant-form") do |form| %>
5+
<% if @assistant.errors.any? %>
6+
<div class="error-messages">
7+
<h2><%= pluralize(@assistant.errors.count, "error") %> prohibited this assistant from being saved:</h2>
8+
<ul>
9+
<% @assistant.errors.full_messages.each do |message| %>
10+
<li><%= message %></li>
11+
<% end %>
12+
</ul>
13+
</div>
14+
<% end %>
815

9-
<%%= form.submit %>
10-
<%% end %>
16+
<div class="form-group">
17+
<%= form.label :instructions, "Instructions for the Assistant" %>
18+
<%= form.text_area :instructions, rows: 5, placeholder: "Enter instructions for the assistant..." %>
19+
</div>
20+
21+
<div class="form-actions">
22+
<%= form.submit "Create Assistant", class: "submit-button" %>
23+
<%= link_to 'Back to Assistants', assistants_path, class: "back-link" %>
24+
</div>
25+
<% end %>
26+
</div>

‎lib/langchainrb_rails/generators/langchainrb_rails/templates/assistant/views/show.html.erb‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,11 @@
1-
<h1>Assistant: <%%= @assistant.instructions %></h1>
1+
<div class="chat-container">
2+
<h1 class="chat-header">Assistant: <%= @assistant.id %></h1>
23

3-
<div id="chat-messages">
4-
<%% @messages.each do |message| %>
5-
<p><strong><%%= message.role %>:</strong> <%%= message.content %></p>
6-
<%% end %>
7-
</div>
8-
9-
<%%= form_with(url: chat_assistant_path(@assistant), method: :post, remote: true) do |form| %>
10-
<%%= form.text_area :content %>
11-
<%%= form.submit 'Send' %>
12-
<%% end %>
4+
<div id="chat-messages" class="chat-messages">
5+
<%= render partial: "assistants/message", collection: @messages %>
6+
</div>
137

14-
<script>
15-
document.addEventListener('ajax:success', function(event) {
16-
const [data, _status, _xhr] = event.detail;
17-
const chatMessages = document.getElementById('chat-messages');
18-
chatMessages.innerHTML += `<p><strong>user:</strong> ${data.message.content}</p>`;
19-
chatMessages.innerHTML += `<p><strong>assistant:</strong> ${data.response}</p>`;
20-
});
21-
</script>
8+
<%= turbo_frame_tag "new_message" do %>
9+
<%= render "assistants/message_form" %>
10+
<% end %>
11+
</div>

0 commit comments

Comments
 (0)