latest changes for the assistant

src/app/Http/Controllers/IndexController.php

@@ -21,25 +21,33 @@ class IndexController extends Controller
 
     public function clientInfo(ClientRequest $request) {
         $data = $request->validated();
-        $client = Client::where('email', $data['email'])->first();
-
-        try{
-            $chatResponse = ChatGPT::getClientInfo($data['prompt'], $client);
-            $images = [];
-            foreach ($chatResponse['images'] as $value) {
-                try{
-                    $images[] = Storage::disk('public')->url($client->photos->pluck('path')[$value - 1]);
-                } catch (\Exception $exception){
-                    continue;
+        if ($client = Client::where('email', $data['email'])->first()) {
+            try {
+                $chatResponse = ChatGPT::getClientInfo($data['prompt'], $client);
+                $images = [];
+                if ($chatResponse['images']) {
+                    if (!is_array($chatResponse['images'])) {
+                        $chatResponse['images'] = explode(',', str_replace(' ', '', $chatResponse['images']));
+                    }
+                    foreach ($chatResponse['images'] as $value) {
+                        try {
+                            $images[] = Storage::disk('public')->url($client->photos->pluck('path')[$value - 1]);
+                        } catch (\Exception $exception) {
+                            continue;
+                        }
+                    }
                 }
-            }
-            $chatResponse['images'] = $images;
 
-            return response()->json($chatResponse);
-        } catch (\Throwable $th) {
-            return response()->json($th->getMessage(), 500);
+                $chatResponse['images'] = $images;
+                $chatResponse['client'] = $client;
+
+                return response()->json($chatResponse);
+            } catch (\Throwable $th) {
+                return response()->json($th->getMessage(), 500);
+            }
         }
 
+        return null;
     }
 
     /**

src/app/Services/ChatGPT/ChatGPT.php

@@ -27,7 +27,7 @@ class ChatGPT {
                 $request = [
                     [
                         'role' => 'system',
-                        'content' => $prompt . ' . Please respond with the image numbers separated by comma and explanation, JSON only, without any extra formatting, such as triple backticks or quotation marks. Just the raw JSON as text. If there won\'t be any images matching the request please put null for the "images" key'
+                        'content' => $prompt . ' . Please respond with the photos numbers separated by comma and explanation, JSON only, without any extra formatting, such as triple backticks or quotation marks. Just the raw JSON as text. If there won\'t be any images matching the request please put null for the "images" key and explanation for the "explanation" key'
                     ],
                     [
                         "role" => "user",
@@ -53,7 +53,7 @@ class ChatGPT {
 
                  throw new \Exception('Can\'t process your request');
             } catch (\Exception $th) {
-                throw new \Exception($e->getMessage());
+                throw new \Exception($th->getMessage());
             }
         }
 

src/public/loader.svg

@@ -0,0 +1,5 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.7521 10.1965C14.9974 10.5301 16.2844 9.78709 16.618 8.54185C16.9517 7.29661 16.2086 6.00961 14.9634 5.67595C13.7182 5.34229 12.4311 6.08534 12.0975 7.33058C11.7638 8.57582 12.5069 9.86282 13.7521 10.1965Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M5.58806 18.8645C6.8333 19.1981 8.1203 18.4551 8.45396 17.2098C8.78762 15.9646 8.04457 14.6776 6.79933 14.3439C5.55409 14.0103 4.26709 14.7533 3.93343 15.9985C3.59977 17.2438 4.33235 18.528 5.58806 18.8645Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M16.4904 21.7863C17.7356 22.12 19.0226 21.3769 19.3563 20.1317C19.69 18.8865 18.9469 17.5995 17.7017 17.2658C16.4564 16.9321 15.1694 17.6752 14.8358 18.9204C14.5021 20.1657 15.2452 21.4527 16.4904 21.7863Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/resources/js/main.js

@@ -2,6 +2,13 @@ import axios from "axios";
 
 if (document.querySelector('#ask-btn')) {
     document.querySelector('#ask-btn').addEventListener('click',async function(e) {
+        this.disabled = true
+        this.querySelector('.button-text').style.display = 'none'
+        this.querySelector('.loader').style.display = ''
+
+        let wrapper = document.getElementById('response-wrapper')
+        wrapper.innerHTML = ''
+
         const data = {
             'email': document.querySelector('#email').value,
             'prompt': document.querySelector('#prompt').value
@@ -14,6 +21,38 @@ if (document.querySelector('#ask-btn')) {
             }
         });
 
-        console.log(response)
+        if (response.status == 200) {
+            this.disabled = false
+            this.querySelector('.button-text').style.display = ''
+            this.querySelector('.loader').style.display = 'none'
+
+            wrapper.innerHTML = `
+                            <div class="row page-row set">
+                                <strong>Client information</strong>
+                            </div>
+                            <div class="row page-row set">
+                                <div class="bl">
+                                    <ul>
+                                        <li>Name : ${response.data.client.first_name} ${response.data.client.last_name}</li>
+                                        <li>Phone : ${response.data.client.phone}</li>
+                                        <li>Address : ${response.data.client.addresses[0].address}, ${response.data.client.addresses[0].city}, ${response.data.client.addresses[0].state}, ${response.data.client.addresses[0].zip}</li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="row page-row set">
+                                <strong>Here is what i found : </strong>
+                                <div class="bl">
+                                    ${response.data?.explanation}                         
+                                </div>
+                            </div>
+                            <div class="row page-row">
+                                ${response.data.images && response.data.images.map((image) => {
+                                    return `<div class="image-wrapper set">
+                                                 <img alt="" src="${image}" style="max-width: 100%;"/>       
+                                            </div>`
+                                })}
+                            </div>`
+        }
+
     })
 }