Added help section and enhanced menu

endpoints/lollms_help.py

@@ -55,22 +55,3 @@ from utilities.execution_engines.svg_execution_engine import execute_svg
 
 router = APIRouter()
 lollmsElfServer:LOLLMSWebUI = LOLLMSWebUI.get_instance()
-
-@router.get("/help/{path:path}")
-async def serve_help(path: str):
-    """
-    Serve help file.
-
-    Args:
-        path (FilePath): The path of the help file to serve.
-
-    Returns:
-        FileResponse: The file response containing the requested personalities file.
-    """
-    path = sanitize_path_from_endpoint(path)    
-    file_path = lollmsElfServer.lollms_paths.lollms_core_path / "help" / "/".join(str(path).split("/")[1:])
-
-    if not Path(file_path).exists():
-        raise HTTPException(status_code=400, detail="File not found")
-
-    return FileResponse(str(file_path))

lollms_core

@@ -1 +1 @@
-Subproject commit 9fec7a86ec981112121fdcdce27f7bace6d08828
+Subproject commit b1564948940e56ac3cec8a769b0375324224d041

web/dist/help/getting-started.md

@@ -0,0 +1,10 @@
+# Getting Started with LoLLMs
+
+Welcome to LoLLMs! Here are some basic steps to get you started:
+
+1. **Open the chat interface**: Navigate to the main chat screen.
+2. **Start a conversation**: Type your question or command in the chat bar.
+3. **Explore available features**: Try out different commands to see what LoLLMs can do.
+4. **Use the help command**: Type "help" in the chat to see a list of available commands and features.
+
+Remember, LoLLMs is designed to assist you with various tasks and answer your questions. Don't hesitate to ask if you need more information!

web/dist/help/lollms-context.md

@@ -0,0 +1,38 @@
+# About LoLLMs
+
+## What is LoLLMs?
+
+LoLLMs (Lord of Large Language Multimodal Systems) is a powerful and versatile AI tool designed to assist users with a wide range of tasks. It's an ecosystem that includes:
+
+- A vast array of applications in the LoLLMs zoo
+- Thousands of AI models in the models zoo
+- Over 500 distinct AI personas in the personalities zoo
+
+LoLLMs can perform various tasks, including text-to-text, text-to-image, image-to-text, speech-to-text, text-to-speech, text-to-music, and text-to-video operations.
+
+## When was LoLLMs created?
+
+LoLLMs was created about one and a half years ago (as of October 2024). It has grown from humble beginnings to become a tool that aims to "rule them all" in terms of AI capabilities.
+
+## Why was LoLLMs created?
+
+LoLLMs was created by ParisNeo, a computer geek passionate about AI. It represents the culmination of a childhood dream and embodies a powerful vision for the future of AI. The project aims to:
+
+1. Push the boundaries of what's possible with AI
+2. Provide a versatile tool that can assist with a wide range of tasks
+3. Promote ethical AI development and community collaboration
+4. Demonstrate how passion-driven projects can have a significant impact in the tech world
+
+ParisNeo develops LoLLMs in his free time, treating it as a hobby and a way to give back to the community. The project is driven by a genuine desire to help people through technology and to find personal satisfaction in being useful.
+
+## How is LoLLMs developed?
+
+LoLLMs follows a rapid development cycle:
+- New versions are released almost every day
+- The project is continuously improved and expanded
+- All developments are shared openly with the community
+- The project encourages transparency and collaboration in AI development
+
+This approach allows LoLLMs to quickly adapt to new AI breakthroughs, integrate community feedback, and regularly introduce new capabilities.
+
+LoLLMs stands as a testament to what can be achieved when cutting-edge technology is driven by passion, ethical considerations, and a community-focused approach to AI development.

web/dist/help/lollms-styling.md

@@ -0,0 +1,184 @@
+Certainly! I'd be happy to create a documentation about LoLLMs's CSS styling for new developers of the WebUI. This documentation will help them understand how to use the theme consistently in their projects and how to modify the theme globally. Here's a comprehensive guide:
+
+# LoLLMs CSS Styling Documentation
+
+## Table of Contents
+1. [Introduction](#introduction)
+2. [Getting Started](#getting-started)
+3. [Color Scheme](#color-scheme)
+4. [Typography](#typography)
+5. [Layout Components](#layout-components)
+6. [Utility Classes](#utility-classes)
+7. [Custom Components](#custom-components)
+8. [Responsive Design](#responsive-design)
+9. [Dark Mode](#dark-mode)
+10. [Customization](#customization)
+
+## 1. Introduction <a name="introduction"></a>
+
+LoLLMs uses a flat gray theme based on Tailwind CSS. This theme provides a clean, modern look with support for both light and dark modes. The styling is designed to be consistent across different components and easily customizable.
+
+## 2. Getting Started <a name="getting-started"></a>
+
+To use this theme in your project, follow these steps:
+
+1. Import the CSS file into your project.
+2. Make sure you have Tailwind CSS set up in your project.
+3. Include the Google Fonts link for Roboto in your HTML head:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+```
+
+## 3. Color Scheme <a name="color-scheme"></a>
+
+The theme uses a gray-based color palette. Here are the main color variables:
+
+```css
+:root {
+  --color-primary: #4a4a4a;
+  --color-primary-light: #6a6a6a;
+  --color-secondary: #8a8a8a;
+  --color-accent: #3a3a3a;
+  --color-light-text-panel: #ffffff;
+  --color-dark-text-panel: #e0e0e0;
+  --color-bg-light-panel: #f0f0f0;
+  --color-bg-light: #ffffff;
+  --color-bg-light-tone: #e0e0e0;
+  --color-bg-light-code-block: #f5f5f5;
+  --color-bg-light-tone-panel: #d0d0d0;
+  --color-bg-light-discussion: #f8f8f8;
+  --color-bg-light-discussion-odd: #f0f0f0;
+  --color-bg-dark: #2a2a2a;
+  --color-bg-dark-tone: #3a3a3a;
+  --color-bg-dark-tone-panel: #4a4a4a;
+  --color-bg-dark-code-block: #3a3a3a;
+  --color-bg-dark-discussion: #333333;
+  --color-bg-dark-discussion-odd: #2d2d2d;
+}
+```
+
+## 4. Typography <a name="typography"></a>
+
+The theme uses the Roboto font family. Heading styles are predefined:
+
+```css
+h1 { @apply text-4xl md:text-5xl font-bold text-gray-800 dark:text-gray-100 mb-6; }
+h2 { @apply text-3xl font-semibold text-gray-700 dark:text-gray-200 mb-4; }
+h3 { @apply text-2xl font-medium text-gray-600 dark:text-gray-300 mb-3; }
+h4 { @apply text-xl font-medium text-gray-500 dark:text-gray-400 mb-2; }
+```
+
+## 5. Layout Components <a name="layout-components"></a>
+
+### Background
+```css
+.background-color {
+  @apply bg-gray-100 dark:bg-gray-900 min-h-screen;
+}
+```
+
+### Toolbar
+```css
+.toolbar-color {
+  @apply text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md;
+}
+```
+
+### Panels
+```css
+.panels-color {
+  @apply text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md;
+}
+```
+
+### Chatbox
+```css
+.chatbox-color {
+  @apply bg-gray-50 dark:bg-gray-800;
+}
+```
+
+## 6. Utility Classes <a name="utility-classes"></a>
+
+### Buttons
+```css
+.btn-primary {
+  @apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded;
+}
+
+.btn-secondary {
+  @apply bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded;
+}
+```
+
+### Cards
+```css
+.card {
+  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
+}
+```
+
+### Inputs
+```css
+.input {
+  @apply bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400;
+}
+```
+
+## 7. Custom Components <a name="custom-components"></a>
+
+### Messages
+```css
+.message {
+  @apply relative w-full rounded-lg m-2 shadow-md border border-gray-300 dark:border-gray-600 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg;
+}
+```
+
+### Menu Items
+```css
+.menu-item {
+  @apply mb-2 px-4 py-2 text-gray-600 dark:text-gray-300 font-bold text-lg transition-all duration-300 ease-in-out;
+  @apply hover:text-gray-800 hover:dark:text-gray-100 hover:transform hover:-translate-y-1;
+}
+```
+
+## 8. Responsive Design <a name="responsive-design"></a>
+
+The theme uses Tailwind's responsive classes. For example:
+
+```css
+h1 { @apply text-4xl md:text-5xl font-bold text-gray-800 dark:text-gray-100 mb-6; }
+```
+
+This makes the h1 element larger on medium-sized screens and above.
+
+## 9. Dark Mode <a name="dark-mode"></a>
+
+Dark mode styles are included using Tailwind's `dark:` variant. For example:
+
+```css
+.background-color {
+  @apply bg-gray-100 dark:bg-gray-900 min-h-screen;
+}
+```
+
+## 10. Customization <a name="customization"></a>
+
+To customize the theme globally:
+
+1. Modify the color variables in the `:root` selector.
+2. Update the Tailwind classes in the utility classes and custom components.
+3. Add new custom classes as needed, following the existing naming conventions.
+
+For example, to change the primary button color:
+
+```css
+.btn-primary {
+  @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
+}
+```
+
+Remember to use Tailwind's configuration file to extend or override the default theme if you need to add new colors or modify existing ones.
+
+By following this documentation, new developers should be able to maintain consistency in their projects and easily modify the theme as needed. Always refer to this guide when adding new components or styles to ensure a cohesive look across the entire application.

web/dist/index.html

@@ -6,8 +6,8 @@
     <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LoLLMS WebUI</title>
-    <script type="module" crossorigin src="/assets/index-DPFvvYVB.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-9O6Btwmi.css">
+    <script type="module" crossorigin src="/assets/index-BS65G-yP.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-JIVTe9o9.css">
   </head>
   <body>
     <div id="app"></div>

web/public/help/getting-started.md

@@ -0,0 +1,10 @@
+# Getting Started with LoLLMs
+
+Welcome to LoLLMs! Here are some basic steps to get you started:
+
+1. **Open the chat interface**: Navigate to the main chat screen.
+2. **Start a conversation**: Type your question or command in the chat bar.
+3. **Explore available features**: Try out different commands to see what LoLLMs can do.
+4. **Use the help command**: Type "help" in the chat to see a list of available commands and features.
+
+Remember, LoLLMs is designed to assist you with various tasks and answer your questions. Don't hesitate to ask if you need more information!

web/public/help/lollms-context.md

@@ -0,0 +1,38 @@
+# About LoLLMs
+
+## What is LoLLMs?
+
+LoLLMs (Lord of Large Language Multimodal Systems) is a powerful and versatile AI tool designed to assist users with a wide range of tasks. It's an ecosystem that includes:
+
+- A vast array of applications in the LoLLMs zoo
+- Thousands of AI models in the models zoo
+- Over 500 distinct AI personas in the personalities zoo
+
+LoLLMs can perform various tasks, including text-to-text, text-to-image, image-to-text, speech-to-text, text-to-speech, text-to-music, and text-to-video operations.
+
+## When was LoLLMs created?
+
+LoLLMs was created about one and a half years ago (as of October 2024). It has grown from humble beginnings to become a tool that aims to "rule them all" in terms of AI capabilities.
+
+## Why was LoLLMs created?
+
+LoLLMs was created by ParisNeo, a computer geek passionate about AI. It represents the culmination of a childhood dream and embodies a powerful vision for the future of AI. The project aims to:
+
+1. Push the boundaries of what's possible with AI
+2. Provide a versatile tool that can assist with a wide range of tasks
+3. Promote ethical AI development and community collaboration
+4. Demonstrate how passion-driven projects can have a significant impact in the tech world
+
+ParisNeo develops LoLLMs in his free time, treating it as a hobby and a way to give back to the community. The project is driven by a genuine desire to help people through technology and to find personal satisfaction in being useful.
+
+## How is LoLLMs developed?
+
+LoLLMs follows a rapid development cycle:
+- New versions are released almost every day
+- The project is continuously improved and expanded
+- All developments are shared openly with the community
+- The project encourages transparency and collaboration in AI development
+
+This approach allows LoLLMs to quickly adapt to new AI breakthroughs, integrate community feedback, and regularly introduce new capabilities.
+
+LoLLMs stands as a testament to what can be achieved when cutting-edge technology is driven by passion, ethical considerations, and a community-focused approach to AI development.

web/public/help/lollms-styling.md

@@ -0,0 +1,184 @@
+Certainly! I'd be happy to create a documentation about LoLLMs's CSS styling for new developers of the WebUI. This documentation will help them understand how to use the theme consistently in their projects and how to modify the theme globally. Here's a comprehensive guide:
+
+# LoLLMs CSS Styling Documentation
+
+## Table of Contents
+1. [Introduction](#introduction)
+2. [Getting Started](#getting-started)
+3. [Color Scheme](#color-scheme)
+4. [Typography](#typography)
+5. [Layout Components](#layout-components)
+6. [Utility Classes](#utility-classes)
+7. [Custom Components](#custom-components)
+8. [Responsive Design](#responsive-design)
+9. [Dark Mode](#dark-mode)
+10. [Customization](#customization)
+
+## 1. Introduction <a name="introduction"></a>
+
+LoLLMs uses a flat gray theme based on Tailwind CSS. This theme provides a clean, modern look with support for both light and dark modes. The styling is designed to be consistent across different components and easily customizable.
+
+## 2. Getting Started <a name="getting-started"></a>
+
+To use this theme in your project, follow these steps:
+
+1. Import the CSS file into your project.
+2. Make sure you have Tailwind CSS set up in your project.
+3. Include the Google Fonts link for Roboto in your HTML head:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+```
+
+## 3. Color Scheme <a name="color-scheme"></a>
+
+The theme uses a gray-based color palette. Here are the main color variables:
+
+```css
+:root {
+  --color-primary: #4a4a4a;
+  --color-primary-light: #6a6a6a;
+  --color-secondary: #8a8a8a;
+  --color-accent: #3a3a3a;
+  --color-light-text-panel: #ffffff;
+  --color-dark-text-panel: #e0e0e0;
+  --color-bg-light-panel: #f0f0f0;
+  --color-bg-light: #ffffff;
+  --color-bg-light-tone: #e0e0e0;
+  --color-bg-light-code-block: #f5f5f5;
+  --color-bg-light-tone-panel: #d0d0d0;
+  --color-bg-light-discussion: #f8f8f8;
+  --color-bg-light-discussion-odd: #f0f0f0;
+  --color-bg-dark: #2a2a2a;
+  --color-bg-dark-tone: #3a3a3a;
+  --color-bg-dark-tone-panel: #4a4a4a;
+  --color-bg-dark-code-block: #3a3a3a;
+  --color-bg-dark-discussion: #333333;
+  --color-bg-dark-discussion-odd: #2d2d2d;
+}
+```
+
+## 4. Typography <a name="typography"></a>
+
+The theme uses the Roboto font family. Heading styles are predefined:
+
+```css
+h1 { @apply text-4xl md:text-5xl font-bold text-gray-800 dark:text-gray-100 mb-6; }
+h2 { @apply text-3xl font-semibold text-gray-700 dark:text-gray-200 mb-4; }
+h3 { @apply text-2xl font-medium text-gray-600 dark:text-gray-300 mb-3; }
+h4 { @apply text-xl font-medium text-gray-500 dark:text-gray-400 mb-2; }
+```
+
+## 5. Layout Components <a name="layout-components"></a>
+
+### Background
+```css
+.background-color {
+  @apply bg-gray-100 dark:bg-gray-900 min-h-screen;
+}
+```
+
+### Toolbar
+```css
+.toolbar-color {
+  @apply text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md;
+}
+```
+
+### Panels
+```css
+.panels-color {
+  @apply text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md;
+}
+```
+
+### Chatbox
+```css
+.chatbox-color {
+  @apply bg-gray-50 dark:bg-gray-800;
+}
+```
+
+## 6. Utility Classes <a name="utility-classes"></a>
+
+### Buttons
+```css
+.btn-primary {
+  @apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded;
+}
+
+.btn-secondary {
+  @apply bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded;
+}
+```
+
+### Cards
+```css
+.card {
+  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
+}
+```
+
+### Inputs
+```css
+.input {
+  @apply bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400;
+}
+```
+
+## 7. Custom Components <a name="custom-components"></a>
+
+### Messages
+```css
+.message {
+  @apply relative w-full rounded-lg m-2 shadow-md border border-gray-300 dark:border-gray-600 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg;
+}
+```
+
+### Menu Items
+```css
+.menu-item {
+  @apply mb-2 px-4 py-2 text-gray-600 dark:text-gray-300 font-bold text-lg transition-all duration-300 ease-in-out;
+  @apply hover:text-gray-800 hover:dark:text-gray-100 hover:transform hover:-translate-y-1;
+}
+```
+
+## 8. Responsive Design <a name="responsive-design"></a>
+
+The theme uses Tailwind's responsive classes. For example:
+
+```css
+h1 { @apply text-4xl md:text-5xl font-bold text-gray-800 dark:text-gray-100 mb-6; }
+```
+
+This makes the h1 element larger on medium-sized screens and above.
+
+## 9. Dark Mode <a name="dark-mode"></a>
+
+Dark mode styles are included using Tailwind's `dark:` variant. For example:
+
+```css
+.background-color {
+  @apply bg-gray-100 dark:bg-gray-900 min-h-screen;
+}
+```
+
+## 10. Customization <a name="customization"></a>
+
+To customize the theme globally:
+
+1. Modify the color variables in the `:root` selector.
+2. Update the Tailwind classes in the utility classes and custom components.
+3. Add new custom classes as needed, following the existing naming conventions.
+
+For example, to change the primary button color:
+
+```css
+.btn-primary {
+  @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
+}
+```
+
+Remember to use Tailwind's configuration file to extend or override the default theme if you need to add new colors or modify existing ones.
+
+By following this documentation, new developers should be able to maintain consistency in their projects and easily modify the theme as needed. Always refer to this guide when adding new components or styles to ensure a cohesive look across the entire application.

web/src/views/DiscussionsView.vue

@@ -81,8 +81,8 @@
                     </button>
 
                     <!-- Expandable menu -->
-                    <div class="expandable-menu z-50 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg" :class="{ 'menu-visible': isMenuVisible }">
-                        <div class="grid grid-cols-4 gap-4">
+                    <div class="expandable-menu discussion z-50 p-4 bg-white rounded-lg shadow-lg" :class="{ 'hidden': !isMenuVisible }">
+                        <div>
                             <!-- Edit discussion list -->
                             <button class="text-3xl hover:text-secondary dark:hover:text-secondary-light duration-150 active:scale-95" title="Edit discussion list" type="button" @click="isCheckbox = !isCheckbox" :class="isCheckbox ? 'text-secondary dark:text-secondary-light' : 'text-gray-700 dark:text-gray-300'">
                             <i data-feather="check-square"></i>
@@ -579,19 +579,11 @@ animation: custom-pulse 2s infinite;
 .menu-container {
   position: relative;
 }
-
 .expandable-menu {
-  position: absolute;
-  top: 100%;
-  left: 10px;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  display: none;
-  flex-direction: column;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+  @apply absolute top-full left-2.5 border border-gray-300 rounded flex-col shadow-md;
 }
 
+
 .menu-container:hover .expandable-menu,
 .menu-visible {
   display: flex;
@@ -2643,10 +2635,10 @@ export default {
         version_info:{
             get(){
                 if(this.$store.state.version!=undefined && this.$store.state.version!="unknown"){
-                    return " v" + this.$store.state.version;
+                    return this.$store.state.version;
                 }
                 else{
-                    return "";
+                    return "...";
                 }
             }
         },

web/src/views/HelpView.vue

@@ -1,67 +1,118 @@
 <template>
-  <div class="help-view">
-    <h1>Bienvenue dans l'aide de Lollms</h1>
-
-    <p>
-      **Lollms** (**L**ord **o**f **L**arge **L**anguage and **M**ultimodal **S**ystems), prononcé "lahms", est un outil puissant qui vous permet d'interagir avec une variété de modèles de langage et multimodaux. Il a été créé par **ParisNeo**, un expert en IA et en robotique passionné de programmation depuis son enfance, dans le but de rendre les modèles d'IA accessibles à tous, gratuitement. Son slogan : **"Un outil pour tous les gouverner"**. [1, 2] 
-    </p>
-
-    <h2>Composants clés de Lollms</h2>
-
-    <ul>
-      <li>
-        <b>Liaisons :</b> Essentiellement du code Python, les liaisons sont des modules intermédiaires permettant à Lollms d'interagir avec différents modèles d'IA.  Elles agissent comme des ponts entre l'interface utilisateur de Lollms et les bibliothèques logicielles qui exécutent ces modèles. [3-5]
-      </li>
-      <li>
-        <b>Services :</b> Lollms s'appuie sur des services supplémentaires créés par des développeurs tiers. Ces services, souvent open source, étendent les fonctionnalités de Lollms. Parmi eux, on trouve : [6]
-        <ul>
-          <li>**Services LLM :**  tels qu'ollama et vllm, dédiés à la génération de texte.</li>
-          <li>**Génération d'images :** comme Stable Diffusion, pour créer des images à partir de descriptions textuelles.</li>
-          <li>**Synthèse vocale :** comme Xtts, permettant de convertir du texte en parole.</li>
-        </ul>
-      </li>
-      <li>
-        <b>Modèles :</b> Au cœur de Lollms se trouvent les modèles de langage. Ces modèles, formés sur d'énormes ensembles de données textuelles, sont capables de : [6-8]
-        <ul>
-          <li>Générer du texte cohérent et contextuel.</li>
-          <li>Traduire des langues avec une précision remarquable.</li>
-          <li>Produire différents types de contenu créatif, tels que des poèmes, du code et des scripts.</li>
-          <li>Fournir des réponses informatives à vos questions.</li>
-        </ul>
-        La taille d'un modèle est un facteur déterminant de ses performances : plus le modèle est grand (c'est-à-dire plus il possède de paramètres), plus ses capacités sont généralement avancées. [8, 9]
-      </li>
-      <li>
-        <b>Personnalités :</b> Donnez vie à Lollms grâce aux personnalités. Ces agents virtuels, dotés de caractéristiques et de styles de communication uniques, sont créés par le biais de deux méthodes principales : [10, 11]
-        <ul>
-          <li>**Conditionnement de texte :** On fournit au modèle des exemples de conversations représentatifs de la personnalité souhaitée, l'entraînant à imiter ce style.</li>
-          <li>**Code Python personnalisé :** Des scripts Python permettent de définir des comportements plus complexes et d'intégrer des fonctionnalités spécifiques à une personnalité.</li>
-        </ul>
-        Avec plus de 250 personnalités disponibles, couvrant des domaines allant de la science à la fiction, vous trouverez forcément celle qui correspond à vos besoins. [10, 12, 13]
-      </li>
-    </ul>
-
-    <h2>Fonctionnalités de Lollms</h2>
-
-    <p>
-      Lollms offre un éventail impressionnant de fonctionnalités :
-    </p>
-
-    <ul>
-      <li>**Génération de texte :**  Écrivez des histoires, des articles, des poèmes et plus encore.</li>
-      <li>**Traduction linguistique :**  Brisez les barrières linguistiques en traduisant du texte dans différentes langues.</li>
-      <li>**Écriture créative :** Explorez votre côté artistique en générant des scripts, des poèmes et des paroles de chansons.</li>
-      <li>**Réponse aux questions :**  Obtenez des réponses à vos questions en puisant dans les connaissances des modèles de langage.</li>
-      <li>**Génération d'images :**  Créez des images uniques à partir de descriptions textuelles.</li>
-      <li>**Synthèse vocale :**  Donnez une voix à vos textes grâce à la synthèse vocale.</li>
-      <li>**Exécution de code :**  Générez et exécutez du code dans différents langages de programmation.</li>
-      <li>**Intégration Web :**  Intégrez Lollms à vos projets web pour des fonctionnalités dynamiques.</li>
-      <li>**Et bien plus encore! :**  Lollms est en constante évolution, avec de nouvelles fonctionnalités ajoutées régulièrement.</li>
-    </ul>
+  <div class="help-view background-color p-6 w-full">
+    <div class="big-card w-full">
+      <h1 class="text-4xl md:text-5xl font-bold text-gray-800 dark:text-gray-100 mb-6">LoLLMs Help</h1>
+      <div class="help-sections-container">
+        <div class="help-sections space-y-4">
+          <div v-for="(section, index) in helpSections" :key="index" class="help-section message">
+            <h2 @click="toggleSection(index)" class="menu-item cursor-pointer flex justify-between items-center">
+              {{ section.title }}
+              <span class="toggle-icon">{{ section.isOpen ? '▼' : '▶' }}</span>
+            </h2>
+            <div v-if="section.isOpen" class="help-content mt-4">
+              <div v-html="section.content" class="prose dark:prose-invert"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { marked } from 'marked';
+
 export default {
   name: 'HelpView',
-};
-</script>
+  data() {
+    return {
+      helpSections: []
+    }
+  },
+  methods: {
+    toggleSection(index) {
+      this.helpSections[index].isOpen = !this.helpSections[index].isOpen;
+    },
+    async loadMarkdownFile(filename) {
+      try {
+        const response = await fetch(`/help/${filename}`);
+        const markdown = await response.text();
+        return marked(markdown);
+      } catch (error) {
+        console.error('Error loading markdown file:', error);
+        return 'Error loading help content.';
+      }
+    },
+    async loadHelpSections() {
+      const sectionFiles = [
+        { title: 'About LoLLMs', file: 'lollms-context.md' },
+        { title: 'Getting Started', file: 'getting-started.md' },
+        { title: 'Uploading Files', file: 'uploading-files.md' },
+        { title: 'Sending Images', file: 'sending-images.md' },
+        { title: 'Using Code Interpreter', file: 'code-interpreter.md' },
+        { title: 'Internet Search', file: 'internet-search.md' }
+      ];
+
+      for (const section of sectionFiles) {
+        const content = await this.loadMarkdownFile(section.file);
+        this.helpSections.push({
+          title: section.title,
+          content: content,
+          isOpen: false
+        });
+      }
+    }
+  },
+  mounted() {
+    this.loadHelpSections();
+  }
+}
+</script>
+
+<style scoped>
+.help-view {
+  @apply min-h-screen;
+}
+
+.big-card {
+  @apply bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 mx-auto;
+}
+
+.help-sections-container {
+  @apply max-h-[70vh] overflow-y-auto pr-4;
+}
+
+.help-section {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+.help-content {
+  @apply text-gray-600 dark:text-gray-300;
+}
+
+/* Cute scrollbar styles */
+.help-sections-container::-webkit-scrollbar {
+  width: 12px;
+}
+
+.help-sections-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+
+.help-sections-container::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 10px;
+  border: 3px solid #f1f1f1;
+}
+
+.help-sections-container::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* For Firefox */
+.help-sections-container {
+  scrollbar-width: thin;
+  scrollbar-color: #888 #f1f1f1;
+}
+</style>

web/src/views/SettingsView.vue

@@ -1590,7 +1590,7 @@
                         <table class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                             <tr>
                             <td style="min-width: 200px;">
-                                <label for="activate_internet_search" class="text-sm font-bold" style="margin-right: 1rem;">Activate internet search:</label>
+                                <label for="activate_internet_search" class="text-sm font-bold" style="margin-right: 1rem;">Activate automatic internet search (for every prompt):</label>
                             </td>
                             <td>
                                 <div class="flex flex-row">