refactor: follow up on example structure

README.md

@@ -79,7 +79,7 @@ docker compose exec app bin/console app:blog:embed -vv
 Now you should be able to run the test command and get some results:
 
 ```shell
-docker compose exec app bin/console app:chroma:test
+docker compose exec app bin/console app:blog:query
 ```
 
 **Don't forget to set up the project in your favorite IDE or editor.**
@@ -89,4 +89,4 @@ docker compose exec app bin/console app:chroma:test
 * The chatbot application is a simple and small Symfony 7.2 application.
 * The UI is coupled to a [Twig LiveComponent](https://symfony.com/bundles/ux-live-component/current/index.html), that integrates different `Chat` implementations on top of the user's session.
 * You can reset the chat context by hitting the `Reset` button in the top right corner.
-* You find three different usage scenarios in the upper navbar.
+* You find three different usage scenarios in the upper navbar.

assets/app.js

@@ -1,3 +1,6 @@
 import './bootstrap.js';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './styles/app.css';
+import './styles/blog.css';
+import './styles/youtube.css';
+import './styles/wikipedia.css';

assets/styles/app.css

@@ -1,16 +1,5 @@
 body {
     min-height: 100vh;
-    &.rag, .rag .card-img-top {
-        background: rgb(220,139,110);
-        background: linear-gradient(0deg, rgba(220,139,110,1) 0%, rgba(244,233,115,1) 100%);
-    }
-    &.youtube, .youtube .card-img-top {
-        background: rgb(34,34,34);
-        background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(71, 71, 71) 100%);
-    }
-    &.wikipedia, .wikipedia .card-img-top {
-        background: url('/wiki.png') no-repeat right 50px bottom 50px fixed, linear-gradient(0deg, rgb(246, 246, 246) 0%, rgb(197, 197, 197) 100%);
-    }
 
     footer, footer a {
         color: #6c757d;
@@ -20,10 +9,6 @@ body {
 .index {
     .card-img-top {
         text-align: center;
-
-        .youtube & {
-            color: #ff0000;
-        }
     }
 }
 
@@ -44,55 +29,19 @@ body {
     .card-body {
         height: 700px;
 
-        .wikipedia & {
-            background-image: linear-gradient(135deg, #f2f2f2 16.67%, #ebebeb 16.67%, #ebebeb 50%, #f2f2f2 50%, #f2f2f2 66.67%, #ebebeb 66.67%, #ebebeb 100%);
-            background-size: 21.21px 21.21px;
-        }
-
         .user-message {
             border-radius: 10px 10px 0 10px;
             color: #292929;
-
-            .rag & {
-                background: #f4e973;
-            }
-
-            .youtube & {
-                background: #3e2926;
-                color: #fafafa;
-            }
-
-            .wikipedia & {
-                background: #ffffff;
-            }
         }
 
         .bot-message {
             border-radius: 10px 10px 10px 0;
+            color: #292929;
 
-            .rag & {
-                background: #dc8b6e;
-
-                a {
-                    color: #f4e973;
-                }
-            }
-
-            .youtube & {
-                background: #df3535;
-
-                a {
-                    color: #3e2926;
-                }
-            }
-
-            .wikipedia & {
-                background: #ffffff;
-                color: #292929 !important;
+            &.loading {
+                color: rgba(41, 41, 41, 0.5);
             }
 
-            color: #fff;
-
             p {
                 margin-bottom: 0;
             }
@@ -102,31 +51,6 @@ body {
             width: 50px;
             height: 50px;
             border: 2px solid white;
-
-            .rag &.bot {
-                outline: 1px solid #ffdacc;
-                background: #ffdacc;
-            }
-
-            .rag &.user {
-                outline: 1px solid #fffad1;
-                background: #fffad1;
-            }
-
-            .youtube &.bot {
-                outline: 1px solid #ffcccc;
-                background: #ffcccc;
-            }
-
-            .youtube &.user {
-                outline: 1px solid #9e8282;
-                background: #9e8282;
-            }
-
-            .wikipedia &.bot, .wikipedia &.user {
-                outline: 1px solid #eaeaea;
-                background: #eaeaea;
-            }
         }
     }
 
@@ -138,28 +62,4 @@ body {
             box-shadow: none !important;
         }
     }
-
-    #welcome {
-        h4 {
-            .rag & {
-                color: #f97b62;
-            }
-
-            .youtube & {
-                color: #ff0000;
-            }
-        }
-    }
-
-    #chat-reset, #chat-submit {
-        .rag &:hover {
-            background: #f97b62;
-            border-color: #f97b62;
-        }
-
-        .youtube &:hover {
-            background: #ff0000;
-            border-color: #ff0000;
-        }
-    }
 }

assets/styles/blog.css

@@ -0,0 +1,61 @@
+.blog {
+    body&, .card-img-top {
+        background: #2c5282;
+        background: linear-gradient(0deg, #2c5282 0%, #3c366b 100%);
+    }
+
+    .card-img-top {
+        color: #ffffff;
+    }
+
+    &.chat {
+        .user-message {
+            background: #d5054e;
+            color: #ffffff;
+        }
+
+        .bot-message {
+            color: #ffffff;
+            background: #3182ce;
+
+            &.loading {
+                color: rgba(255, 255, 255, 0.5);
+            }
+
+            a {
+                color: #c8d8ef;
+
+                &:hover {
+                    color: #ffffff;
+                }
+            }
+
+            code {
+                color: #ffb1ca;
+            }
+        }
+
+        .avatar {
+            &.bot {
+                outline: 1px solid #b8d8fb;
+                background: #b8d8fb;
+            }
+
+            &.user {
+                outline: 1px solid #ffb1ca;
+                background: #ffb1ca;
+            }
+        }
+
+        #welcome h4 {
+            color: #2c5282;
+        }
+
+        #chat-reset, #chat-submit {
+            &:hover {
+                background: #d5054e;
+                border-color: #d5054e;
+            }
+        }
+    }
+}

assets/styles/wikipedia.css

@@ -0,0 +1,31 @@
+.wikipedia {
+    body&, .card-img-top {
+        background: url('/wiki.png') no-repeat right 50px bottom 50px fixed, linear-gradient(0deg, rgb(246, 246, 246) 0%, rgb(197, 197, 197) 100%);
+    }
+
+    &.chat {
+        .card-body {
+            background-image: linear-gradient(135deg, #f2f2f2 16.67%, #ebebeb 16.67%, #ebebeb 50%, #f2f2f2 50%, #f2f2f2 66.67%, #ebebeb 66.67%, #ebebeb 100%);
+            background-size: 21.21px 21.21px;
+        }
+
+        .user-message {
+            background: #ffffff;
+        }
+
+        .bot-message {
+            background: #ffffff;
+
+            a {
+                color: #3e2926;
+            }
+        }
+
+        .avatar {
+            &.bot, &.user {
+                outline: 1px solid #eaeaea;
+                background: #eaeaea;
+            }
+        }
+    }
+}

assets/styles/youtube.css

@@ -0,0 +1,49 @@
+.youtube {
+    body&, .card-img-top {
+        background: rgb(34,34,34);
+        background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(71, 71, 71) 100%);
+    }
+
+    .card-img-top {
+        color: #ff0000;
+    }
+
+    &.chat {
+        .user-message {
+            background: #3e2926;
+            color: #fafafa;
+        }
+
+        .bot-message {
+            color: #ffffff;
+            background: #df3535;
+
+            &.loading {
+                color: rgba(255, 255, 255, 0.5);
+            }
+        }
+
+        .avatar {
+            &.bot {
+                outline: 1px solid #ffcccc;
+                background: #ffcccc;
+            }
+
+            &.user {
+                outline: 1px solid #9e8282;
+                background: #9e8282;
+            }
+        }
+
+        #welcome h4 {
+            color: #ff0000;
+        }
+
+        #chat-reset, #chat-submit {
+            &:hover {
+                background: #ff0000;
+                border-color: #ff0000;
+            }
+        }
+    }
+}

config/packages/llm_chain.yaml

@@ -16,7 +16,7 @@ llm_chain:
         openai:
             api_key: '%env(OPENAI_API_KEY)%'
     chain:
-        rag:
+        blog:
             # platform: 'llm_chain.platform.anthropic'
             model:
                 name: 'GPT'

config/routes.yaml

@@ -4,20 +4,23 @@ index:
     defaults:
         template:  'index.html.twig'
 
-rag:
-    path: '/rag'
+blog:
+    path: '/blog'
     controller: 'Symfony\Bundle\FrameworkBundle\Controller\TemplateController'
     defaults:
-        template:  'chat/rag.html.twig'
+        template:  'chat.html.twig'
+        context: { chat: 'blog' }
 
 youtube:
     path: '/youtube'
     controller: 'Symfony\Bundle\FrameworkBundle\Controller\TemplateController'
     defaults:
-        template:  'chat/youtube.html.twig'
+        template:  'chat.html.twig'
+        context: { chat: 'youtube' }
 
 wikipedia:
     path: '/wikipedia'
     controller: 'Symfony\Bundle\FrameworkBundle\Controller\TemplateController'
     defaults:
-        template:  'chat/wikipedia.html.twig'
+        template:  'chat.html.twig'
+        context: { chat: 'wikipedia' }

src/Blog/Chat/Blog.php → src/Blog/Chat.php

@@ -2,7 +2,7 @@
 
 declare(strict_types=1);
 
-namespace App\Blog\Chat;
+namespace App\Blog;
 
 use PhpLlm\LlmChain\ChainInterface;
 use PhpLlm\LlmChain\Model\Message\Message;
@@ -11,13 +11,13 @@
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
 use Symfony\Component\HttpFoundation\RequestStack;
 
-final class Blog
+final class Chat
 {
-    private const SESSION_KEY = 'rag-chat';
+    private const SESSION_KEY = 'blog-chat';
 
     public function __construct(
         private readonly RequestStack $requestStack,
-        #[Autowire(service: 'llm_chain.chain.rag')]
+        #[Autowire(service: 'llm_chain.chain.blog')]
         private readonly ChainInterface $chain,
     ) {
     }

src/Blog/Command/BlogEmbedCommand.php → src/Blog/Command/EmbedCommand.php

@@ -12,7 +12,7 @@
 use Symfony\Component\Console\Style\SymfonyStyle;
 
 #[AsCommand('app:blog:embed', description: 'Create embeddings for Symfony blog and push to ChromaDB.')]
-final class BlogEmbedCommand extends Command
+final class EmbedCommand extends Command
 {
     public function __construct(
         private readonly Embedder $embedder,