refactor: follow up on example structure

Author: chr-hertel

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/icons/entypo/chat.svg

@@ -1,6 +1,6 @@
 body {
     min-height: 100vh;
-    &.rag, .rag .card-img-top {
+    &.blog, .blog .card-img-top {
         background: rgb(220,139,110);
         background: linear-gradient(0deg, rgba(220,139,110,1) 0%, rgba(244,233,115,1) 100%);
     }
@@ -53,7 +53,7 @@ body {
             border-radius: 10px 10px 0 10px;
             color: #292929;
 
-            .rag & {
+            .blog & {
                 background: #f4e973;
             }
 
@@ -70,7 +70,7 @@ body {
         .bot-message {
             border-radius: 10px 10px 10px 0;
 
-            .rag & {
+            .blog & {
                 background: #dc8b6e;
 
                 a {
@@ -103,12 +103,12 @@ body {
             height: 50px;
             border: 2px solid white;
 
-            .rag &.bot {
+            .blog &.bot {
                 outline: 1px solid #ffdacc;
                 background: #ffdacc;
             }
 
-            .rag &.user {
+            .blog &.user {
                 outline: 1px solid #fffad1;
                 background: #fffad1;
             }
@@ -141,7 +141,7 @@ body {
 
     #welcome {
         h4 {
-            .rag & {
+            .blog & {
                 color: #f97b62;
             }
 
@@ -152,7 +152,7 @@ body {
     }
 
     #chat-reset, #chat-submit {
-        .rag &:hover {
+        .blog &:hover {
             background: #f97b62;
             border-color: #f97b62;
         }

assets/icons/mdi/symfony.svg

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

assets/icons/mingcute/ai-fill.svg

@@ -4,20 +4,20 @@ 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:  'blog/chat.html.twig'
 
 youtube:
     path: '/youtube'
     controller: 'Symfony\Bundle\FrameworkBundle\Controller\TemplateController'
     defaults:
-        template:  'chat/youtube.html.twig'
+        template:  'youtube/chat.html.twig'
 
 wikipedia:
     path: '/wikipedia'
     controller: 'Symfony\Bundle\FrameworkBundle\Controller\TemplateController'
     defaults:
-        template:  'chat/wikipedia.html.twig'
+        template:  'wikipedia/chat.html.twig'

assets/styles/app.css

@@ -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,
     ) {
     }

config/packages/llm_chain.yaml

@@ -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,

config/routes.yaml

@@ -2,7 +2,7 @@
 
 declare(strict_types=1);
 
-namespace App\Command;
+namespace App\Blog\Command;
 
 use Codewithkyrian\ChromaDB\Client;
 use PhpLlm\LlmChain\Bridge\OpenAI\Embeddings;
@@ -15,8 +15,8 @@
 use Symfony\Component\Console\Output\OutputInterface;
 use Symfony\Component\Console\Style\SymfonyStyle;
 
-#[AsCommand('app:chroma:test', description: 'Testing Chroma DB connection.')]
-final class ChromaTestCommand extends Command
+#[AsCommand('app:blog:query', description: 'Test command for querying the blog collection in Chroma DB.')]
+final class QueryCommand extends Command
 {
     public function __construct(
         private readonly Client $chromaClient,
@@ -31,23 +31,19 @@ protected function execute(InputInterface $input, OutputInterface $output): int
         $io->title('Testing Chroma DB Connection');
 
         $io->comment('Connecting to Chroma DB ...');
-
-        // Check current ChromaDB version
-        $version = $this->chromaClient->version();
-
-        // Get WSC Collection
         $collection = $this->chromaClient->getOrCreateCollection('symfony_blog');
-
         $io->table(['Key', 'Value'], [
-            ['ChromaDB Version', $version],
+            ['ChromaDB Version', $this->chromaClient->version()],
             ['Collection Name', $collection->name],
             ['Collection ID', $collection->id],
             ['Total Documents', $collection->count()],
         ]);
 
-        $io->comment('Searching for content about "New Symfony Features" ...');
+        $search = $io->ask('What do you want to know about?', 'New Symfony Features');
+        $io->comment(sprintf('Converting "%s" to vector & searching in Chroma DB ...', $search));
+        $io->comment('Results are limited to 4 most similar documents.');
 
-        $platformResponse = $this->platform->request(new Embeddings(), 'New Symfony Features');
+        $platformResponse = $this->platform->request(new Embeddings(), $search);
         assert($platformResponse instanceof AsyncResponse);
         $platformResponse = $platformResponse->unwrap();
         assert($platformResponse instanceof VectorResponse);
@@ -62,16 +58,10 @@ protected function execute(InputInterface $input, OutputInterface $output): int
             return Command::FAILURE;
         }
 
-        $io->table(['ID', 'Title'], [
-            /* @phpstan-ignore-next-line */
-            [$queryResponse->ids[0][0], $queryResponse->metadatas[0][0]['title']],
-            /* @phpstan-ignore-next-line */
-            [$queryResponse->ids[0][1], $queryResponse->metadatas[0][1]['title']],
-            /* @phpstan-ignore-next-line */
-            [$queryResponse->ids[0][2], $queryResponse->metadatas[0][2]['title']],
-            /* @phpstan-ignore-next-line */
-            [$queryResponse->ids[0][3], $queryResponse->metadatas[0][3]['title']],
-        ]);
+        foreach ($queryResponse->ids[0] as $i => $id) {
+            $io->section($queryResponse->metadatas[0][$i]['title']);
+            $io->block($queryResponse->metadatas[0][$i]['description']);
+        }
 
         $io->success('Chroma DB Connection & Similarity Search Test Successful!');
 

demo.png

@@ -11,7 +11,7 @@
 final readonly class Embedder
 {
     public function __construct(
-        private Loader $loader,
+        private FeedLoader $loader,
         private LlmChainEmbedder $embedder,
     ) {
     }

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

@@ -8,7 +8,7 @@
 use Symfony\Component\Uid\Uuid;
 use Symfony\Contracts\HttpClient\HttpClientInterface;
 
-class Loader
+class FeedLoader
 {
     public function __construct(
         private HttpClientInterface $httpClient,

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

@@ -2,22 +2,21 @@
 
 declare(strict_types=1);
 
-namespace App\Blog\Twig;
+namespace App\Blog;
 
-use App\Blog\Chat\Blog;
 use PhpLlm\LlmChain\Model\Message\MessageBag;
 use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
 use Symfony\UX\LiveComponent\Attribute\LiveAction;
 use Symfony\UX\LiveComponent\Attribute\LiveArg;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
 
-#[AsLiveComponent('rag')]
-final class BlogComponent
+#[AsLiveComponent('blog', template: 'blog/component.html.twig')]
+final class TwigComponent
 {
     use DefaultActionTrait;
 
     public function __construct(
-        private readonly Blog $chat,
+        private readonly Chat $chat,
     ) {
     }
 

src/Command/ChromaTestCommand.php src/Blog/Command/QueryCommand.php

@@ -2,7 +2,7 @@
 
 declare(strict_types=1);
 
-namespace App\Wikipedia\Chat;
+namespace App\Wikipedia;
 
 use PhpLlm\LlmChain\ChainInterface;
 use PhpLlm\LlmChain\Model\Message\Message;
@@ -11,7 +11,7 @@
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
 use Symfony\Component\HttpFoundation\RequestStack;
 
-final class Wikipedia
+final class Chat
 {
     private const SESSION_KEY = 'wikipedia-chat';
 

src/Blog/Embedder.php

@@ -2,22 +2,21 @@
 
 declare(strict_types=1);
 
-namespace App\Wikipedia\Twig;
+namespace App\Wikipedia;
 
-use App\Wikipedia\Chat\Wikipedia;
 use PhpLlm\LlmChain\Model\Message\MessageBag;
 use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
 use Symfony\UX\LiveComponent\Attribute\LiveAction;
 use Symfony\UX\LiveComponent\Attribute\LiveArg;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
 
-#[AsLiveComponent('wikipedia')]
-final class WikipediaComponent
+#[AsLiveComponent('wikipedia', template: 'wikipedia/component.html.twig')]
+final class TwigComponent
 {
     use DefaultActionTrait;
 
     public function __construct(
-        private readonly Wikipedia $wikipedia,
+        private readonly Chat $wikipedia,
     ) {
     }
 

src/Blog/Loader.php src/Blog/FeedLoader.php

@@ -2,17 +2,16 @@
 
 declare(strict_types=1);
 
-namespace App\YouTube\Chat;
+namespace App\YouTube;
 
-use App\YouTube\TranscriptFetcher;
 use PhpLlm\LlmChain\ChainInterface;
 use PhpLlm\LlmChain\Model\Message\Message;
 use PhpLlm\LlmChain\Model\Message\MessageBag;
 use PhpLlm\LlmChain\Model\Response\TextResponse;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
 use Symfony\Component\HttpFoundation\RequestStack;
 
-final class YouTube
+final class Chat
 {
     private const SESSION_KEY = 'youtube-chat';
 

src/Blog/Twig/BlogComponent.php src/Blog/TwigComponent.php

@@ -2,9 +2,8 @@
 
 declare(strict_types=1);
 
-namespace App\YouTube\Twig;
+namespace App\YouTube;
 
-use App\YouTube\Chat\YouTube;
 use PhpLlm\LlmChain\Model\Message\MessageBag;
 use Psr\Log\LoggerInterface;
 use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
@@ -14,13 +13,13 @@
 
 use function Symfony\Component\String\u;
 
-#[AsLiveComponent('youtube')]
-final class YouTubeComponent
+#[AsLiveComponent('youtube', template: 'youtube/component.html.twig')]
+final class TwigComponent
 {
     use DefaultActionTrait;
 
     public function __construct(
-        private readonly YouTube $youTube,
+        private readonly Chat $youTube,
         private readonly LoggerInterface $logger,
     ) {
     }

src/Wikipedia/Chat/Wikipedia.php src/Wikipedia/Chat.php

@@ -17,13 +17,13 @@
         <nav class="navbar bg-white shadow-lg navbar-expand">
             <div class="container">
                 <a class="navbar-brand ms-2 p-0" href="{{ path('index') }}">
-                    {{ ux_icon('mingcute:ai-fill', { height: '40px', width: '40px' }) }}
+                    {{ ux_icon('fluent:bot-24-filled', { height: '40px', width: '40px' }) }}
                     <strong>LLM Chain</strong> Demo
                 </a>
                 <div class="collapse navbar-collapse">
                     <ul class="navbar-nav ms-auto me-2 mb-0">
                         <li class="nav-item">
-                            <a class="nav-link" href="{{ path('rag') }}">{{ ux_icon('fluent:bot-24-filled', { height: '20px', width: '20px' }) }} RAG Chat Bot</a>
+                            <a class="nav-link" href="{{ path('blog') }}">{{ ux_icon('mdi:symfony', { height: '20px', width: '20px' }) }} Symfony Blog Bot</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link" href="{{ path('youtube') }}">{{ ux_icon('bi:youtube', { height: '20px', width: '20px' }) }} YouTube Transcript Bot</a>

src/Wikipedia/Twig/WikipediaComponent.php src/Wikipedia/TwigComponent.php

@@ -1,9 +1,9 @@
 {% extends 'base.html.twig' %}
 
-{% block body_class 'chat rag' %}
+{% block body_class 'chat blog' %}
 
 {% block content %}
     <div>
-        <twig:rag />
+        <twig:blog />
     </div>
 {% endblock %}