Add Chat

.rubocop.yml

@@ -64,6 +64,9 @@ Metrics/ClassLength:
 Naming/PredicateName:
   Enabled: false
 
+Naming/HeredocDelimiterNaming:
+  Enabled: false
+
 Style/ConditionalAssignment:
   EnforcedStyle: assign_inside_condition
   SingleLineConditionsOnly: false

app/channels/bootcamp_chat_channel.rb

@@ -0,0 +1,6 @@
+class BootcampChatChannel < ApplicationCable::Channel
+  def subscribed
+    solution = current_user.bootcamp_solutions.find_by!(uuid: params[:solution_uuid])
+    stream_from "bootcamp_chat_#{solution.uuid}"
+  end
+end

app/commands/bootcamp/chat_message/create.rb

@@ -0,0 +1,15 @@
+class Bootcamp::ChatMessage
+  class Create
+    include Mandate
+
+    initialize_with :solution, :content, :author
+
+    def call
+      Bootcamp::ChatMessage.create!(
+        solution:,
+        content:,
+        author:
+      )
+    end
+  end
+end

app/commands/bootcamp/chat_message/trigger_llm.rb

@@ -0,0 +1,61 @@
+class Bootcamp::ChatMessage
+  class TriggerLLM
+    include Mandate
+
+    initialize_with :solution, :student_code
+
+    def call
+      RestClient.post(
+        ENV.fetch("GEMINI_STREAMER_URL", "http://localhost:8080/chat"),
+        {
+          solution_uuid: solution.uuid,
+          exercise_info:,
+          code:,
+          messages:,
+          stream_channel:
+        }.to_json,
+        { content_type: :json }
+      )
+    end
+
+    def stream_channel = "bootcamp_chat_#{solution.uuid}"
+
+    def exercise_info
+      <<~EOS
+        The role of the student is to create a simple snake game in HTML, CSS, and JavaScript.
+        The result should be that the snake appears on the screen and moves.
+        When it gets near the edge, it should change direction (in a clockwise manner).
+        There are no controls or dots to grow yet.
+
+        These are the instructions the student was given:
+        `````
+          #{solution.exercise.introduction_markdown}
+        `````
+      EOS
+    end
+
+    def messages
+      solution.messages.last(10).map do |message|
+        {
+          author: message.author,
+          content: message.content
+        }
+      end
+    end
+
+    def code
+      code = JSON.parse(student_code, symbolize_names: true)
+
+      <<~EOS
+        ### HTML
+        #{code[:html] || ""}
+
+        ### CSS
+        #{code[:css] || ""}
+
+        ### JavaScript
+        #{code[:js] || ""}
+      EOS
+    end
+  end
+end

app/controllers/api/bootcamp/chat_messages_controller.rb

@@ -0,0 +1,15 @@
+class API::Bootcamp::ChatMessagesController < API::BaseController
+  def create
+    solution = current_user.bootcamp_solutions.find_by!(uuid: params[:solution_uuid])
+
+    Bootcamp::ChatMessage::Create.(
+      solution,
+      params[:content],
+      :user
+    )
+
+    Bootcamp::ChatMessage::TriggerLLM.(solution, params[:code])
+
+    head :accepted
+  end
+end

app/controllers/spi/bootcamp/chat_messages_controller.rb

@@ -0,0 +1,11 @@
+class SPI::Bootcamp::ChatMessagesController < SPI::BaseController
+  def create
+    Bootcamp::ChatMessage::Create.(
+      Bootcamp::Solution.find_by!(uuid: params[:solution_uuid]),
+      params[:content],
+      :llm
+    )
+
+    head :ok
+  end
+end

app/css/bootcamp/components/ai-chat.css

@@ -0,0 +1,78 @@
+.chat-textarea {
+    margin: auto;
+    resize: none;
+    cursor: text;
+    padding: 6px;
+}
+
+.ai-chat-container {
+    @apply h-100 content-end;
+}
+
+.chat-input-container {
+    @apply p-8;
+    @apply flex flex-col items-center hover:cursor-text rounded-12;
+    @apply border-1 border-[#ccc] focus-within:border-[#2e57e8];
+    @apply overflow-hidden;
+
+    textarea {
+        &::placeholder {
+            @apply text-textColor7;
+        }
+
+        &:focus,
+        &:focus-within {
+            @apply border-none shadow-none outline-none;
+        }
+        @apply border-none shadow-none outline-none;
+        @apply outline-none;
+    }
+}
+
+.chat-thread {
+    @apply flex flex-col gap-8 p-16;
+    @apply max-h-[calc(100vh-200px)] overflow-y-auto;
+}
+
+.chat-message-wrapper {
+    @apply self-end flex flex-col;
+    label {
+        @apply w-fit;
+        @apply text-textColor7 text-12 mb-4;
+        @apply self-end;
+    }
+    &.llm {
+        @apply self-start;
+
+        label {
+            @apply self-start;
+        }
+    }
+}
+
+.chat-message {
+    @apply text-16;
+    @apply bg-textColor6 px-12 py-8 rounded-12 text-white font-medium w-fit;
+    @apply leading-180;
+
+    &.llm {
+        @apply bg-bootcamp-light-purple;
+        @apply max-w-[100%];
+        @apply text-textColor1 border-1 border-bootcamp-purple;
+
+        p:not(:last-child) {
+            @apply mb-16;
+        }
+
+        pre {
+            @apply bg-thin-border-blue rounded-8 my-8;
+        }
+
+        & :not(pre) > code {
+            @apply inline-flex items-center justify-center rounded-5;
+            @apply not-italic;
+            @apply px-6 text-textColor10 leading-regular;
+            background: var(--backgroundColorI);
+        }
+    }
+}

app/css/packs/bootcamp.css

@@ -25,6 +25,7 @@
 @import "../bootcamp/components/scenario";
 @import "../bootcamp/components/logger";
 @import "../bootcamp/components/modal";
+@import "../bootcamp/components/ai-chat";
 
 @import "../bootcamp/components/project-widget";
 @import "../bootcamp/components/exercise-widget";

app/css/ui-kit/animations.css

@@ -74,3 +74,15 @@
         transform: rotate(360deg);
     }
 }
+
+@keyframes blink {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.3;
+    }
+    100% {
+        opacity: 1;
+    }
+}

app/helpers/react_components/bootcamp/css_exercise.rb

@@ -26,11 +26,7 @@ def data
             expected:
           }
         },
-        solution: {
-          uuid: solution.uuid,
-          status: solution.status,
-          passed_basic_tests: solution.passed_basic_tests?
-        },
+        solution: solution_data,
         test_results: submission&.test_results,
         code: {
           normalize_css:,
@@ -55,7 +51,9 @@ def data
           projects_index: Exercism::Routes.bootcamp_projects_url(only_path: true),
           dashboard_index: Exercism::Routes.bootcamp_dashboard_url(only_path: true),
           bootcamp_level_url: Exercism::Routes.bootcamp_level_url("idx"),
-          custom_fns_dashboard: Exercism::Routes.bootcamp_custom_functions_url
+          custom_fns_dashboard: Exercism::Routes.bootcamp_custom_functions_url,
+          api_bootcamp_solution_chat: Exercism::Routes.api_bootcamp_solution_chat_messages_url(solution_uuid: solution.uuid,
+            only_path: true)
         }
       }
     end
@@ -73,6 +71,23 @@ def readonly_ranges
       exercise.readonly_ranges
     end
 
+    def solution_data
+      return nil unless solution
+
+      {
+        uuid: solution.uuid,
+        status: solution.status,
+        passed_basic_tests: solution.passed_basic_tests?,
+        messages: solution.messages.map do |message|
+          {
+            id: message.id,
+            author: message.author,
+            content: message.content
+          }
+        end
+      }
+    end
+
     # rubocop:disable Layout/LineLength
     def normalize_css = "
       * {box-sizing:content-box}

app/helpers/react_components/bootcamp/frontend_exercise_page.rb

@@ -59,7 +59,14 @@ def solution_data
       {
         uuid: solution.uuid,
         status: solution.status,
-        passed_basic_tests: solution.passed_basic_tests?
+        passed_basic_tests: solution.passed_basic_tests?,
+        messages: solution.messages.map do |message|
+          {
+            id: message.id,
+            author: message.author,
+            content: message.content
+          }
+        end
       }
     end
 
@@ -72,7 +79,9 @@ def solution_links
         projects_index: Exercism::Routes.bootcamp_projects_url(only_path: true),
         dashboard_index: Exercism::Routes.bootcamp_dashboard_url(only_path: true),
         bootcamp_level_url: Exercism::Routes.bootcamp_level_url("idx"),
-        custom_fns_dashboard: Exercism::Routes.bootcamp_custom_functions_url
+        custom_fns_dashboard: Exercism::Routes.bootcamp_custom_functions_url,
+        api_bootcamp_solution_chat: Exercism::Routes.api_bootcamp_solution_chat_messages_url(solution_uuid: solution.uuid,
+          only_path: true)
       }
     end
 

app/helpers/react_components/bootcamp/jikiscript_exercise.rb

@@ -30,12 +30,7 @@ def data
           },
           test_results: submission&.test_results
         },
-        solution: {
-          uuid: solution.uuid,
-          status: solution.status,
-          passed_basic_tests: solution.passed_basic_tests?,
-          passed_bonus_tests: solution.passed_bonus_tests?
-        },
+        solution: solution_data,
         test_results: submission&.test_results,
         code: {
           stub: ::Bootcamp::Solution::GenerateStub.(exercise, current_user, exercise.language == "jikiscript" ? "jiki" : "js"),
@@ -51,7 +46,9 @@ def data
           projects_index: Exercism::Routes.bootcamp_projects_url(only_path: true),
           dashboard_index: Exercism::Routes.bootcamp_dashboard_url(only_path: true),
           bootcamp_level_url: Exercism::Routes.bootcamp_level_url("idx"),
-          custom_fns_dashboard: Exercism::Routes.bootcamp_custom_functions_url
+          custom_fns_dashboard: Exercism::Routes.bootcamp_custom_functions_url,
+          api_bootcamp_solution_chat: Exercism::Routes.api_bootcamp_solution_chat_messages_url(solution_uuid: solution.uuid,
+            only_path: true)
         }
       }
     end
@@ -60,6 +57,24 @@ def custom_functions
       ::Bootcamp::CustomFunction::BuildRecursiveList.(current_user, submission&.custom_functions || [])
     end
 
+    def solution_data
+      return nil unless solution
+
+      {
+        uuid: solution.uuid,
+        status: solution.status,
+        passed_basic_tests: solution.passed_basic_tests?,
+        passed_bonus_tests: solution.passed_bonus_tests?,
+        messages: solution.messages.map do |message|
+          {
+            id: message.id,
+            author: message.author,
+            content: message.content
+          }
+        end
+      }
+    end
+
     def readonly_ranges
       return submission.readonly_ranges if submission