├── README.md
└── index.html


/README.md:
--------------------------------------------------------------------------------
  1 | # PocketBase x htmx x python (comming back soon) AI Chat App
  2 | 
  3 | A simple chat application built with HTMx, JavaScript, and the PocketBase API, styled using Tailwind CSS. there is a python AI chatbot listening as well.
  4 | I was initially just testing to see if i could make a simple chat app using only htmx to send requests directly to and from pocketbase. this would mean my whole project would be one html file and the pocketbase admin ui. i worked on it for 30 min. 
  5 | the problem i pocketbase send json back but htmx expects html. though i was able to get the ai to send back html
  6 | if someone is intrested in the same thing as me here. get in contact with me here. i'll gladly work with you.
  7 | 
  8 | edit: i was able to get the json to display as html. but i still need to figure out how to send json to pocketbase. i've removed the ai for now. i'll add it back later. now this whole project is just one html file and the pocketbase admin ui. Anyone can send pull requests. i'll merge them as long as they are good.
  9 | 
 10 | here is the current one:
 11 | ## images 
 12 |  - latest version:
 13 |  - ![Screenshot 2023-12-13 093218](https://github.com/valiantlynx/htmx-chat/assets/86688436/ba79b3b4-8608-4292-81e3-f976ea814579)
 14 |  
 15 |  - version 1
 16 |  - ![image](https://github.com/valiantlynx/htmx-chat/assets/86688436/d3c45b12-87b3-43df-879b-92b8bd33fc9d)
 17 | 
 18 | 
 19 | ## Table of Contents
 20 | 
 21 | 
 22 | - [PocketBase x htmx x python(comming back soon) AI Chat App](#pocketbase-x-htmx-x-pythoncomming-back-soon-ai-chat-app)
 23 |   - [images](#images)
 24 |   - [Table of Contents](#table-of-contents)
 25 |   - [Features](#features)
 26 |   - [Demo](#demo)
 27 |   - [Progress](#progress)
 28 |   - [Installation](#installation)
 29 |   - [usage](#usage)
 30 |   - [Contributing](#contributing)
 31 |   - [License](#license)
 32 |   - [for cloning into monorepo](#for-cloning-into-monorepo)
 33 |     - [cors work around in the head](#cors-work-around-in-the-head)
 34 |   
 35 | ## Features
 36 | 
 37 | - Send and receive chat messages.
 38 | - Real-time chat updates using htmx.
 39 | - Stylish and responsive UI with Tailwind CSS.
 40 | - Messages are stored and retrieved using the PocketBase API.
 41 | - Easily customizable and extendable.
 42 | 
 43 | ## Demo
 44 | 
 45 | You can try out a live demo of the chat app [here](https://valiantlynx.github.io/htmx-chat/).
 46 | 
 47 | ## Progress
 48 | 
 49 | i've been able to show the messages returned from pocketbase(as json) into the chat and looks good.
 50 | i will return the ai to listen to the chats and answer. 
 51 | 
 52 | ## Installation
 53 | 
 54 | 1. Clone this repository to your local machine:
 55 | 
 56 | ```bash
 57 | git clone https://github.com/valiantlynx/htmx-chat.git
 58 | ```
 59 | 2. Navigate to the project directory:
 60 | ```bash
 61 | cd chat-app
 62 | 
 63 | ```
 64 | 3. Open the index.html file in your web browser or serve it using a local development server.
 65 | 
 66 | ## usage
 67 | 1. Open the chat app in your web browser.
 68 | 
 69 | 2. Enter your message in the input field and click the "Send" button to send a message.
 70 | 
 71 | 3. Received messages will be displayed in the chat container.
 72 | 
 73 | 
 74 | ## Contributing
 75 | 
 76 | Contributions are welcome! If you'd like to contribute to this project, please follow these steps:
 77 | 
 78 | 1. Fork the repository.
 79 | 
 80 | 2. Create a new branch for your feature or bug fix:
 81 | 
 82 | ```bash
 83 |    git checkout -b feature/your-feature-name
 84 | ```
 85 | 
 86 | 3. Make your changes and commit them:
 87 | 
 88 | ```bash
 89 | git commit -m "Add your feature description"
 90 | ```
 91 | 
 92 | 4. Push your changes to your forked repository:
 93 | ```bash
 94 | git push origin feature/your-feature-name
 95 | ```
 96 | 5. Create a pull request from your forked repository to the main project repository.
 97 | Please make sure to follow the project's code of conduct and contribute in a respectful and constructive manner.
 98 | 
 99 | ## License
100 | This project is licensed under the MIT License - do what the fuck you want. just give me credit.
101 | 
102 | 
103 | ## for cloning into monorepo
104 | ```bash
105 | git subtree add --prefix=apps/htmx-chat https://github.com/valiantlynx/htmx-chat.git main --squash
106 | git subtree pull --prefix=apps/htmx-chat https://github.com/valiantlynx/htmx-chat.git main --squash
107 | git subtree push --prefix=apps/htmx-chat https://github.com/valiantlynx/htmx-chat.git main
108 | ```
109 | 
110 | ### cors work around in the head
111 | ´´´js
112 |     <script>
113 |       // CORS workaround
114 |       document.addEventListener("htmx:configRequest", (evt) => {
115 |             evt.detail.headers = [];
116 |       });
117 |    </script>
118 | ´´´
119 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Pocketbase X htmx Chat</title>
 7 |     <link href="https://cdn.jsdelivr.net/npm/daisyui@3.7.3/dist/full.css" rel="stylesheet" type="text/css">
 8 |     <script src="https://cdn.tailwindcss.com"></script>
 9 |     <script src="https://unpkg.com/htmx.org@1.9.12"></script>
10 |     <script src="https://unpkg.com/htmx.org/dist/ext/client-side-templates.js"></script>
11 |     <script src="https://cdn.jsdelivr.net/npm/nunjucks@3.2.4/browser/nunjucks.min.js"></script>
12 |     <!-- Include SSE extension for real-time updates -->
13 |     <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
14 | </head>
15 | <body>
16 |     <div class="min-h-screen flex flex-col justify-center items-center">
17 |           <!-- New Section for Icons -->
18 |           <div class="flex justify-center ga
19 |             <a href="https://github.com/valiantlynx/htmx-chat" target="_blank" class="text-6xl">
20 |                 <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
21 |                     <g fill-rule="evenodd" clip-rule="evenodd">
22 |                         <path
23 |                             d="M24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4ZM0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24Z" />
24 |                         <path
25 |                             d="M19.1833 45.4716C18.9898 45.2219 18.9898 42.9973 19.1833 38.798C17.1114 38.8696 15.8024 38.7258 15.2563 38.3667C14.437 37.828 13.6169 36.1667 12.8891 34.9959C12.1614 33.8251 10.5463 33.64 9.89405 33.3783C9.24182 33.1165 9.07809 32.0496 11.6913 32.8565C14.3044 33.6634 14.4319 35.8607 15.2563 36.3745C16.0806 36.8883 18.0515 36.6635 18.9448 36.2519C19.8382 35.8403 19.7724 34.3078 19.9317 33.7007C20.1331 33.134 19.4233 33.0083 19.4077 33.0037C18.5355 33.0037 13.9539 32.0073 12.6955 27.5706C11.437 23.134 13.0581 20.2341 13.9229 18.9875C14.4995 18.1564 14.4485 16.3852 13.7699 13.6737C16.2335 13.3589 18.1347 14.1343 19.4734 16.0001C19.4747 16.0108 21.2285 14.9572 24.0003 14.9572C26.772 14.9572 27.7553 15.8154 28.5142 16.0001C29.2731 16.1848 29.88 12.7341 34.5668 13.6737C33.5883 15.5969 32.7689 18.0001 33.3943 18.9875C34.0198 19.9749 36.4745 23.1147 34.9666 27.5706C33.9614 30.5413 31.9853 32.3523 29.0384 33.0037C28.7005 33.1115 28.5315 33.2855 28.5315 33.5255C28.5315 33.8856 28.9884 33.9249 29.6465 35.6117C30.0853 36.7362 30.117 39.948 29.7416 45.247C28.7906 45.4891 28.0508 45.6516 27.5221 45.7347C26.5847 45.882 25.5669 45.9646 24.5669 45.9965C23.5669 46.0284 23.2196 46.0248 21.837 45.8961C20.9154 45.8103 20.0308 45.6688 19.1833 45.4716Z" />
26 |                     </g>
27 |                 </svg>
28 |             </a>
29 |             <a href="https://www.valiantlynx.com" target="_blank" class="text-6xl">
30 |                 <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 2048 2048">
31 |                     <path fill="currentColor"
32 |                         d="M1024 0q141 0 272 36t245 103t207 160t160 208t103 245t37 272q0 141-36 272t-103 245t-160 207t-208 160t-245 103t-272 37q-141 0-272-36t-245-103t-207-160t-160-208t-103-244t-37-273q0-141 36-272t103-245t160-207t208-160T751 37t273-37m0 1920q123 0 237-32t214-90t182-141t140-181t91-214t32-238q0-123-32-237t-90-214t-141-182t-181-140t-214-91t-238-32q-123 0-237 32t-214 90t-182 141t-140 181t-91 214t-32 238q0 123 32 237t90 214t141 182t181 140t214 91t238 32m597-880l48-144h75l-85 256h-75l-48-144l-48 144h-75l-85-256h75l48 144l48-144h74zm-464-144h75l-85 256h-75l-48-144l-48 144h-75l-85-256h75l48 144l48-144h74l48 144zm-512 0h75l-85 256h-75l-48-144l-48 144h-75l-85-256h75l48 144l48-144h74l48 144z" />
33 |                 </svg>
34 |             </a>
35 | 
36 | 
37 |         </div>
38 |         <h1 class="text-3xl font-bold mb-8">Pocketbase X htmx Chat</h1>
39 |         <h3 class="text-xl font-bold mb-4">Powered by htmx and Pocketbase.</h3>
40 |         <p class="text-lg mb-1">This is a simple chat app that uses htmx to send and receive messages. This one html
41 |             file is all there is to it.</p>
42 |         <p class="text-lg mb-1">The chat messages are sent and received using htmx and stored in a Pocketbase
43 |             collection. The chat messages are rendered using Nunjucks templates.</p>
44 |           <h6 class="text-xl font-bold mb-4">When it comes to realtime. the simplest i know is <a href="https://gun-chat.valiantlynx.com" target="_blank" class="link link-primary text-6xl">gunDB</a></h6>
45 | 
46 | 
47 |         <!-- Chat Form -->
48 |         <div class="bg-base-300 rounded-lg p-4 shadow-md w-full sm:w-2/3" hx-ext="client-side-templates">
49 |             <form id="chat-form" hx-post="https://pb.valiantlynx.com/api/collections/chat_htmx/records" hx-swap="none" hx-encoding="multipart/form-data" hx-on::after-request="if(event.detail.successful) { document.getElementById('message-input').value = ''; htmx.trigger('#chat-container', 'refreshChat'); }">
50 |                 <div class="flex flex-wrap">
51 |                     <input type="text" name="message" id="message-input" placeholder="Type your message" class="flex-grow input px-2 py-1 border rounded-l-lg" minlength="2">
52 |                     <button type="submit" class="px-4 py-2 btn rounded-r-lg border border-secondary">Send</button>
53 |                 </div>
54 |             </form>
55 | 
56 |             <!-- Chat Container with Real-Time Updates -->
57 |             <div id="chat-container" class="mb-4" hx-get="https://pb.valiantlynx.com/api/collections/chat_htmx/records?page=1&perPage=1&sort=-created" hx-trigger="load, refreshChat" nunjucks-template="chat"></div>
58 |         </div>
59 | 
60 |         <!-- Nunjucks Template for Chat Messages -->
61 |         <template id="chat">
62 |             {% if page == 1 %}
63 |             <i>Found {{ totalItems }} chats.</i>
64 |             {% endif %}
65 |             {% for chat in items %}
66 |             <div class="chat chat-start">
67 |                 <div class="chat-image avatar">
68 |                     <div class="w-10 rounded-full">
69 |                         <img alt="Tailwind CSS chat bubble component" src="https://api.dicebear.com/7.x/adventurer/svg?seed={{ chat.message }}">
70 |                     </div>
71 |                 </div>
72 |                 <div class="chat-header">
73 |                     Someone
74 |                     <time class="text-xs opacity-50">{{ chat.created | truncate(10, true, "") }}</time>
75 |                 </div>
76 |                 <div class="chat-bubble">{{ chat.message }}</div>
77 |                 <div class="chat-footer opacity-50">
78 |                     Delivered
79 |                 </div>
80 |             </div>
81 |             {% endfor %}
82 |             {% if page %}
83 |             <button hx-get="https://pb.valiantlynx.com/api/collections/chat_htmx/records?page={{ page + 1 }}&perPage=3&sort=-created" hx-swap="outerHTML" hx-trigger="revealed" class="invisible" nunjucks-template="chat">
84 |                 Load More...
85 |             </button>
86 |             {% endif %}
87 |         </template>
88 |     </div>
89 | </body>
90 | </html>
91 | 


--------------------------------------------------------------------------------