feat: initial setup of demo app

Author: chr-hertel

.env

@@ -0,0 +1,23 @@
+# In all environments, the following files are loaded if they exist,
+# the latter taking precedence over the former:
+#
+#  * .env                contains default values for the environment variables needed by the app
+#  * .env.local          uncommitted file with local overrides
+#  * .env.$APP_ENV       committed environment-specific defaults
+#  * .env.$APP_ENV.local uncommitted environment-specific overrides
+#
+# Real environment variables win over .env files.
+#
+# DO NOT DEFINE PRODUCTION SECRETS IN THIS FILE NOR IN ANY OTHER COMMITTED FILES.
+# https://symfony.com/doc/current/configuration/secrets.html
+#
+# Run "composer dump-env prod" to compile .env files for production use (requires symfony/flex >=1.2).
+# https://symfony.com/doc/current/best_practices.html#use-environment-variables-for-infrastructure-configuration
+
+###> symfony/framework-bundle ###
+APP_ENV=dev
+APP_SECRET=ccb9dca72dce53c683eaaf775bfdb253
+###< symfony/framework-bundle ###
+
+CHROMADB_HOST=chromadb
+OPENAI_API_KEY=sk-...

.env.test

@@ -0,0 +1,7 @@
+# define your env variables for the test env here
+KERNEL_CLASS='App\Kernel'
+APP_SECRET='$ecretf0rt3st'
+SYMFONY_DEPRECATIONS_HELPER=999999
+PANTHER_APP_ENV=panther
+PANTHER_ERROR_SCREENSHOT_DIR=./var/error-screenshots
+OPENAI_API_KEY=sk-proj-testing1234

.gitignore

@@ -0,0 +1,29 @@
+###> symfony/framework-bundle ###
+/.env.local
+/.env.local.php
+/.env.*.local
+/config/secrets/dev/dev.decrypt.private.php
+/config/secrets/prod/prod.decrypt.private.php
+/public/bundles/
+/var/
+/vendor/
+###< symfony/framework-bundle ###
+###> symfony/asset-mapper ###
+/public/assets/
+/assets/vendor/
+###< symfony/asset-mapper ###
+
+###> php-cs-fixer/shim ###
+/.php-cs-fixer.php
+/.php-cs-fixer.cache
+###< php-cs-fixer/shim ###
+
+###> phpstan/phpstan ###
+phpstan.neon
+###< phpstan/phpstan ###
+
+###> phpunit/phpunit ###
+.phpunit.cache
+###< phpunit/phpunit ###
+
+chromadb

.php-cs-fixer.dist.php

@@ -0,0 +1,15 @@
+<?php
+
+$finder = (new PhpCsFixer\Finder())
+    ->in(__DIR__)
+    ->exclude('var')
+    ->exclude('config/secrets')
+;
+
+return (new PhpCsFixer\Config())
+    ->setParallelConfig(PhpCsFixer\Runner\Parallel\ParallelConfigFactory::detect())
+    ->setRules([
+        '@Symfony' => true,
+    ])
+    ->setFinder($finder)
+;

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2024 Christopher Hertel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished
+to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,79 @@
+# LLM Chain - Symfony Demo Chatbot Application
+
+Simple Symfony demo application on top of [LLM Chain](https://github.com/php-llm/llm-chain) and its [integration bundle](https://github.com/php-llm/llm-chain-bundle).
+
+## Examples
+![demo.png](demo.png)
+
+## Requirements
+
+What you need to run this demo:
+
+* Internet Connection
+* Terminal & Browser
+* [Git](https://git-scm.com/) & [GitHub Account](https://github.com)
+* [Docker](https://www.docker.com/) with [Docker Compose Plugin](https://docs.docker.com/compose/)
+* Your Favorite IDE or Editor
+
+## Technology
+
+This small demo sits on top of following technologies:
+
+* [PHP >= 8.4](https://www.php.net/releases/8.4/en.php)
+* [Symfony 7.2 incl. Twig, Asset Mapper & UX](https://symfony.com/)
+* [Bootstrap 5](https://getbootstrap.com/docs/5.0/getting-started/introduction/)
+* [OpenAI's GPT & Embeddings](https://platform.openai.com/docs/overview)
+* [ChromaDB Vector Store](https://www.trychroma.com/)
+* [FrankenPHP](https://frankenphp.dev/)
+
+## Setup
+
+The setup is split into three parts, the Symfony application, the OpenAI configuration, and initializing the Chroma DB.
+
+### 1. Symfony App
+
+Checkout the repository, start the docker environment and install dependencies:
+```shell
+git clone git@github.com:php-llm/symfony-demo.git
+cd symfony-demo
+docker compose up -d
+docker compose run composer install --no-scripts
+```
+
+Now you should be able to open https://localhost/ in your browser,
+and the chatbot UI should be available for you to start chatting.
+
+### 2. OpenAI Configuration
+
+For using GPT and embedding models from OpenAI, you need to configure an OpenAI API key as environment variable.
+This requires you to have an OpenAI account, create a valid API key and set it as `OPENAI_API_KEY` in `.env.local` file.
+
+Verify the success of this step by running the following command:
+```shell
+docker compose exec app bin/console debug:dotenv
+```
+
+You should be able to see the `OPENAI_API_KEY` in the list of environment variables.
+
+### 3. Chroma DB Initialization
+
+The Chroma DB is a vector store that is used to store embeddings of the chatbot's context.
+
+To initialize the Chroma DB, you need to run the following command:
+```shell
+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
+```
+
+**Don't forget to set up the project in your favorite IDE or editor.** 
+
+## Functionality
+
+* The chatbot application is a simple and small Symfony 7.2 application.
+* The UI is coupled to a Twig LiveComponent, 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.

assets/app.js

@@ -0,0 +1,3 @@
+import './bootstrap.js';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './styles/app.css';

assets/bootstrap.js

@@ -0,0 +1,5 @@
+import { startStimulusApp } from '@symfony/stimulus-bundle';
+
+const app = startStimulusApp();
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

assets/controllers.json

@@ -0,0 +1,30 @@
+{
+    "controllers": {
+        "@symfony/ux-live-component": {
+            "live": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "@symfony/ux-live-component/dist/live.min.css": true
+                }
+            }
+        },
+        "@symfony/ux-turbo": {
+            "turbo-core": {
+                "enabled": true,
+                "fetch": "eager"
+            },
+            "mercure-turbo-stream": {
+                "enabled": false,
+                "fetch": "eager"
+            }
+        },
+        "@symfony/ux-typed": {
+            "typed": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        }
+    },
+    "entrypoints": []
+}

assets/controllers/chat_controller.js

@@ -0,0 +1,59 @@
+import { Controller } from '@hotwired/stimulus';
+import { getComponent } from '@symfony/ux-live-component';
+
+export default class extends Controller {
+    async initialize() {
+        this.component = await getComponent(this.element);
+        this.scrollToBottom();
+
+        const input = document.getElementById('chat-message');
+        input.addEventListener('keypress', (event) => {
+            if (event.key === 'Enter') {
+                this.submitMessage();
+            }
+        });
+        input.focus();
+
+        const resetButton = document.getElementById('chat-reset');
+        resetButton.addEventListener('click', (event) => {
+            this.component.action('reset');
+        });
+
+        const submitButton = document.getElementById('chat-submit');
+        submitButton.addEventListener('click', (event) => {
+            this.submitMessage();
+        });
+
+        this.component.on('loading.state:started', (e,r) => {
+            if (r.actions.includes('reset')) {
+                return;
+            }
+            document.getElementById('welcome')?.remove();
+            document.getElementById('loading-message').removeAttribute('class');
+            this.scrollToBottom();
+        });
+
+        this.component.on('loading.state:finished', () => {
+            document.getElementById('loading-message').setAttribute('class', 'd-none');
+        });
+
+        this.component.on('render:finished', () => {
+            this.scrollToBottom();
+        });
+    };
+
+    submitMessage() {
+        const input = document.getElementById('chat-message');
+        const message = input.value;
+        document
+            .getElementById('loading-message')
+            .getElementsByClassName('user-message')[0].innerHTML = message;
+        this.component.action('submit', { message });
+        input.value = '';
+    }
+
+    scrollToBottom() {
+        const chatBody = document.getElementById('chat-body');
+        chatBody.scrollTop = chatBody.scrollHeight;
+    }
+}