├── .gitignore
├── README.md
├── server
    ├── .env.example
    ├── package.json
    ├── pnpm-lock.yaml
    ├── server.js
    ├── serverGPT3API.js
    ├── whitelist.js
    └── whitelist.js.Example
└── ui
    ├── .eslintignore
    ├── .eslintrc.cjs
    ├── .gitignore
    ├── .npmrc
    ├── .prettierignore
    ├── .prettierrc
    ├── README.md
    ├── package.json
    ├── playwright.config.ts
    ├── pnpm-lock.yaml
    ├── postcss.config.cjs
    ├── src
        ├── DeclarationFile.d.ts
        ├── app.d.ts
        ├── app.html
        ├── app.postcss
        ├── index.test.ts
        ├── lib
        │   ├── images
        │   │   ├── banner1.jpg
        │   │   ├── favicon.png
        │   │   ├── github.svg
        │   │   ├── svelte-logo.svg
        │   │   ├── svelte-welcome.png
        │   │   └── svelte-welcome.webp
        │   └── styles
        │   │   ├── chat.css
        │   │   ├── prism-okaidia.css
        │   │   └── prism-okaidiaOLD.css
        └── routes
        │   ├── +layout.svelte
        │   ├── +page.svelte
        │   ├── Header.svelte
        │   ├── pageCopy1.svelte
        │   ├── pageCopy2.svelte
        │   ├── pageCopy3.svelte
        │   ├── pageCopy4.svelte
        │   ├── pageCopy5.svelte
        │   └── pageCopy6.svelte
    ├── static
        └── favicon.png
    ├── svelte.config.js
    ├── tailwind.config.cjs
    ├── tests
        └── test.ts
    ├── tsconfig.json
    └── vite.config.ts


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | # env
27 | .env
28 | 
29 | # build
30 | build  
31 | 
32 | # test
33 | test
34 | 
35 | # others:
36 | # whitelist.js
37 | servertest
38 | uitest


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <!-- ensures every link below opens in a new tab similar to HTML target="_blank" -->
 2 | <base target="_blank">
 3 | 
 4 | # ✨ Build and Deploy Your Own ChatGPT AI Application That Will Help You
 5 | 
 6 | ![Open AI CodeGPT](https://i.ibb.co/LS4DRhb/image-257.png)
 7 | 
 8 | ## 📚 SETUP
 9 | 
10 | To Use this ChatGPT Clone AI Chatbot app built with SvelteKit (Frontend), Express.js (Backend) and Openai GPT-3 AI API, do the following:
11 | 
12 | - `Star` this repo,
13 | 
14 | - Then `Clone` this repo,
15 | 
16 | - Finally, see the `Demo` to test the amazing `features` of the `ai chatbot app` and go through the `documentation` by enrolling for the `full course` to guide on how to set it up quickly, easily and successfully, which is `totally FREE` with support at:
17 | 
18 | - [Build and Deploy AI chatbot Website Like chatGPT With Sveltekit, ExpressJs and Openai GPT-3 AI API](https://aihipuniversity.com/Svelte-SvelteKit-303-Advanced-Build-And-Deploy-Ai-Chatbot-Website?ref=AiHiPUniversity.com "FREE Full Course To get Started With AI Chatbot Development")
19 | 
20 | ## 🎉 Launch your Full Stack and Web3 development career with Ai enhanced project-based courses and support
21 | 
22 | [AiHiPUniversity.com](https://AiHiPUniversity.com?ref=AiHiPUniversity.com "Visit AiHiPUniversity Website")
23 | 
24 | ## 📚 Star this Repository
25 | 
26 | If you find this helpful,
27 | 
28 | please remember to `star` the repo at the top and also share it on social media platforms.
29 | 


--------------------------------------------------------------------------------
/server/.env.example:
--------------------------------------------------------------------------------
1 | # COPY AND PAST YOUR OPENAI's API KEY BELOW WITHIN THE QOUTAION MARKS. 
2 | # WARNING: Your API Key is confidencial and must not be exposed on frontend or commited to public places like Github:
3 | # To avoid exposing your API key, kindly rename this file from .evn.example to .env to avoid any errors accessing it by the server,
4 | # and it will also ensure that .gitinore rules help prevent exposing your API KEY by removing it from your commit files to send to github.  
5 | OPENAI_API_KEY= "COPY AND PASTE TO REPLACE THIS TEXT WITH YOUR OPENAI's API KEY"


--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "foskaay-ai-server",
 3 |   "private": true,
 4 |   "version": "1.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "server": "nodemon server"
 8 |   },
 9 |   "dependencies": {
10 |     "cors": "^2.8.5",
11 |     "dotenv": "^16.0.3",
12 |     "express": "^4.18.2",
13 |     "nodemon": "^2.0.20",
14 |     "openai": "^3.1.0"
15 |   }
16 | }


--------------------------------------------------------------------------------
/server/pnpm-lock.yaml:
--------------------------------------------------------------------------------
  1 | lockfileVersion: 5.4
  2 | 
  3 | specifiers:
  4 |   cors: ^2.8.5
  5 |   dotenv: ^16.0.3
  6 |   express: ^4.18.2
  7 |   nodemon: ^2.0.20
  8 |   openai: ^3.1.0
  9 | 
 10 | dependencies:
 11 |   cors: 2.8.5
 12 |   dotenv: 16.0.3
 13 |   express: 4.18.2
 14 |   nodemon: 2.0.20
 15 |   openai: 3.1.0
 16 | 
 17 | packages:
 18 | 
 19 |   /abbrev/1.1.1:
 20 |     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
 21 |     dev: false
 22 | 
 23 |   /accepts/1.3.8:
 24 |     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
 25 |     engines: {node: '>= 0.6'}
 26 |     dependencies:
 27 |       mime-types: 2.1.35
 28 |       negotiator: 0.6.3
 29 |     dev: false
 30 | 
 31 |   /anymatch/3.1.3:
 32 |     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
 33 |     engines: {node: '>= 8'}
 34 |     dependencies:
 35 |       normalize-path: 3.0.0
 36 |       picomatch: 2.3.1
 37 |     dev: false
 38 | 
 39 |   /array-flatten/1.1.1:
 40 |     resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
 41 |     dev: false
 42 | 
 43 |   /asynckit/0.4.0:
 44 |     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 45 |     dev: false
 46 | 
 47 |   /axios/0.26.1:
 48 |     resolution: {integrity: sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==}
 49 |     dependencies:
 50 |       follow-redirects: 1.15.2
 51 |     transitivePeerDependencies:
 52 |       - debug
 53 |     dev: false
 54 | 
 55 |   /balanced-match/1.0.2:
 56 |     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 57 |     dev: false
 58 | 
 59 |   /binary-extensions/2.2.0:
 60 |     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
 61 |     engines: {node: '>=8'}
 62 |     dev: false
 63 | 
 64 |   /body-parser/1.20.1:
 65 |     resolution: {integrity: sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==}
 66 |     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
 67 |     dependencies:
 68 |       bytes: 3.1.2
 69 |       content-type: 1.0.4
 70 |       debug: 2.6.9
 71 |       depd: 2.0.0
 72 |       destroy: 1.2.0
 73 |       http-errors: 2.0.0
 74 |       iconv-lite: 0.4.24
 75 |       on-finished: 2.4.1
 76 |       qs: 6.11.0
 77 |       raw-body: 2.5.1
 78 |       type-is: 1.6.18
 79 |       unpipe: 1.0.0
 80 |     transitivePeerDependencies:
 81 |       - supports-color
 82 |     dev: false
 83 | 
 84 |   /brace-expansion/1.1.11:
 85 |     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 86 |     dependencies:
 87 |       balanced-match: 1.0.2
 88 |       concat-map: 0.0.1
 89 |     dev: false
 90 | 
 91 |   /braces/3.0.2:
 92 |     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
 93 |     engines: {node: '>=8'}
 94 |     dependencies:
 95 |       fill-range: 7.0.1
 96 |     dev: false
 97 | 
 98 |   /bytes/3.1.2:
 99 |     resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
100 |     engines: {node: '>= 0.8'}
101 |     dev: false
102 | 
103 |   /call-bind/1.0.2:
104 |     resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
105 |     dependencies:
106 |       function-bind: 1.1.1
107 |       get-intrinsic: 1.1.3
108 |     dev: false
109 | 
110 |   /chokidar/3.5.3:
111 |     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
112 |     engines: {node: '>= 8.10.0'}
113 |     dependencies:
114 |       anymatch: 3.1.3
115 |       braces: 3.0.2
116 |       glob-parent: 5.1.2
117 |       is-binary-path: 2.1.0
118 |       is-glob: 4.0.3
119 |       normalize-path: 3.0.0
120 |       readdirp: 3.6.0
121 |     optionalDependencies:
122 |       fsevents: 2.3.2
123 |     dev: false
124 | 
125 |   /combined-stream/1.0.8:
126 |     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
127 |     engines: {node: '>= 0.8'}
128 |     dependencies:
129 |       delayed-stream: 1.0.0
130 |     dev: false
131 | 
132 |   /concat-map/0.0.1:
133 |     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
134 |     dev: false
135 | 
136 |   /content-disposition/0.5.4:
137 |     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
138 |     engines: {node: '>= 0.6'}
139 |     dependencies:
140 |       safe-buffer: 5.2.1
141 |     dev: false
142 | 
143 |   /content-type/1.0.4:
144 |     resolution: {integrity: sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==}
145 |     engines: {node: '>= 0.6'}
146 |     dev: false
147 | 
148 |   /cookie-signature/1.0.6:
149 |     resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==}
150 |     dev: false
151 | 
152 |   /cookie/0.5.0:
153 |     resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==}
154 |     engines: {node: '>= 0.6'}
155 |     dev: false
156 | 
157 |   /cors/2.8.5:
158 |     resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
159 |     engines: {node: '>= 0.10'}
160 |     dependencies:
161 |       object-assign: 4.1.1
162 |       vary: 1.1.2
163 |     dev: false
164 | 
165 |   /debug/2.6.9:
166 |     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
167 |     peerDependencies:
168 |       supports-color: '*'
169 |     peerDependenciesMeta:
170 |       supports-color:
171 |         optional: true
172 |     dependencies:
173 |       ms: 2.0.0
174 |     dev: false
175 | 
176 |   /debug/3.2.7_supports-color@5.5.0:
177 |     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
178 |     peerDependencies:
179 |       supports-color: '*'
180 |     peerDependenciesMeta:
181 |       supports-color:
182 |         optional: true
183 |     dependencies:
184 |       ms: 2.1.3
185 |       supports-color: 5.5.0
186 |     dev: false
187 | 
188 |   /delayed-stream/1.0.0:
189 |     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
190 |     engines: {node: '>=0.4.0'}
191 |     dev: false
192 | 
193 |   /depd/2.0.0:
194 |     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
195 |     engines: {node: '>= 0.8'}
196 |     dev: false
197 | 
198 |   /destroy/1.2.0:
199 |     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
200 |     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
201 |     dev: false
202 | 
203 |   /dotenv/16.0.3:
204 |     resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
205 |     engines: {node: '>=12'}
206 |     dev: false
207 | 
208 |   /ee-first/1.1.1:
209 |     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
210 |     dev: false
211 | 
212 |   /encodeurl/1.0.2:
213 |     resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
214 |     engines: {node: '>= 0.8'}
215 |     dev: false
216 | 
217 |   /escape-html/1.0.3:
218 |     resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
219 |     dev: false
220 | 
221 |   /etag/1.8.1:
222 |     resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
223 |     engines: {node: '>= 0.6'}
224 |     dev: false
225 | 
226 |   /express/4.18.2:
227 |     resolution: {integrity: sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==}
228 |     engines: {node: '>= 0.10.0'}
229 |     dependencies:
230 |       accepts: 1.3.8
231 |       array-flatten: 1.1.1
232 |       body-parser: 1.20.1
233 |       content-disposition: 0.5.4
234 |       content-type: 1.0.4
235 |       cookie: 0.5.0
236 |       cookie-signature: 1.0.6
237 |       debug: 2.6.9
238 |       depd: 2.0.0
239 |       encodeurl: 1.0.2
240 |       escape-html: 1.0.3
241 |       etag: 1.8.1
242 |       finalhandler: 1.2.0
243 |       fresh: 0.5.2
244 |       http-errors: 2.0.0
245 |       merge-descriptors: 1.0.1
246 |       methods: 1.1.2
247 |       on-finished: 2.4.1
248 |       parseurl: 1.3.3
249 |       path-to-regexp: 0.1.7
250 |       proxy-addr: 2.0.7
251 |       qs: 6.11.0
252 |       range-parser: 1.2.1
253 |       safe-buffer: 5.2.1
254 |       send: 0.18.0
255 |       serve-static: 1.15.0
256 |       setprototypeof: 1.2.0
257 |       statuses: 2.0.1
258 |       type-is: 1.6.18
259 |       utils-merge: 1.0.1
260 |       vary: 1.1.2
261 |     transitivePeerDependencies:
262 |       - supports-color
263 |     dev: false
264 | 
265 |   /fill-range/7.0.1:
266 |     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
267 |     engines: {node: '>=8'}
268 |     dependencies:
269 |       to-regex-range: 5.0.1
270 |     dev: false
271 | 
272 |   /finalhandler/1.2.0:
273 |     resolution: {integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==}
274 |     engines: {node: '>= 0.8'}
275 |     dependencies:
276 |       debug: 2.6.9
277 |       encodeurl: 1.0.2
278 |       escape-html: 1.0.3
279 |       on-finished: 2.4.1
280 |       parseurl: 1.3.3
281 |       statuses: 2.0.1
282 |       unpipe: 1.0.0
283 |     transitivePeerDependencies:
284 |       - supports-color
285 |     dev: false
286 | 
287 |   /follow-redirects/1.15.2:
288 |     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
289 |     engines: {node: '>=4.0'}
290 |     peerDependencies:
291 |       debug: '*'
292 |     peerDependenciesMeta:
293 |       debug:
294 |         optional: true
295 |     dev: false
296 | 
297 |   /form-data/4.0.0:
298 |     resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
299 |     engines: {node: '>= 6'}
300 |     dependencies:
301 |       asynckit: 0.4.0
302 |       combined-stream: 1.0.8
303 |       mime-types: 2.1.35
304 |     dev: false
305 | 
306 |   /forwarded/0.2.0:
307 |     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
308 |     engines: {node: '>= 0.6'}
309 |     dev: false
310 | 
311 |   /fresh/0.5.2:
312 |     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
313 |     engines: {node: '>= 0.6'}
314 |     dev: false
315 | 
316 |   /fsevents/2.3.2:
317 |     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
318 |     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
319 |     os: [darwin]
320 |     requiresBuild: true
321 |     dev: false
322 |     optional: true
323 | 
324 |   /function-bind/1.1.1:
325 |     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
326 |     dev: false
327 | 
328 |   /get-intrinsic/1.1.3:
329 |     resolution: {integrity: sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==}
330 |     dependencies:
331 |       function-bind: 1.1.1
332 |       has: 1.0.3
333 |       has-symbols: 1.0.3
334 |     dev: false
335 | 
336 |   /glob-parent/5.1.2:
337 |     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
338 |     engines: {node: '>= 6'}
339 |     dependencies:
340 |       is-glob: 4.0.3
341 |     dev: false
342 | 
343 |   /has-flag/3.0.0:
344 |     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
345 |     engines: {node: '>=4'}
346 |     dev: false
347 | 
348 |   /has-symbols/1.0.3:
349 |     resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
350 |     engines: {node: '>= 0.4'}
351 |     dev: false
352 | 
353 |   /has/1.0.3:
354 |     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
355 |     engines: {node: '>= 0.4.0'}
356 |     dependencies:
357 |       function-bind: 1.1.1
358 |     dev: false
359 | 
360 |   /http-errors/2.0.0:
361 |     resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
362 |     engines: {node: '>= 0.8'}
363 |     dependencies:
364 |       depd: 2.0.0
365 |       inherits: 2.0.4
366 |       setprototypeof: 1.2.0
367 |       statuses: 2.0.1
368 |       toidentifier: 1.0.1
369 |     dev: false
370 | 
371 |   /iconv-lite/0.4.24:
372 |     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
373 |     engines: {node: '>=0.10.0'}
374 |     dependencies:
375 |       safer-buffer: 2.1.2
376 |     dev: false
377 | 
378 |   /ignore-by-default/1.0.1:
379 |     resolution: {integrity: sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==}
380 |     dev: false
381 | 
382 |   /inherits/2.0.4:
383 |     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
384 |     dev: false
385 | 
386 |   /ipaddr.js/1.9.1:
387 |     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
388 |     engines: {node: '>= 0.10'}
389 |     dev: false
390 | 
391 |   /is-binary-path/2.1.0:
392 |     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
393 |     engines: {node: '>=8'}
394 |     dependencies:
395 |       binary-extensions: 2.2.0
396 |     dev: false
397 | 
398 |   /is-extglob/2.1.1:
399 |     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
400 |     engines: {node: '>=0.10.0'}
401 |     dev: false
402 | 
403 |   /is-glob/4.0.3:
404 |     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
405 |     engines: {node: '>=0.10.0'}
406 |     dependencies:
407 |       is-extglob: 2.1.1
408 |     dev: false
409 | 
410 |   /is-number/7.0.0:
411 |     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
412 |     engines: {node: '>=0.12.0'}
413 |     dev: false
414 | 
415 |   /media-typer/0.3.0:
416 |     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
417 |     engines: {node: '>= 0.6'}
418 |     dev: false
419 | 
420 |   /merge-descriptors/1.0.1:
421 |     resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==}
422 |     dev: false
423 | 
424 |   /methods/1.1.2:
425 |     resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
426 |     engines: {node: '>= 0.6'}
427 |     dev: false
428 | 
429 |   /mime-db/1.52.0:
430 |     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
431 |     engines: {node: '>= 0.6'}
432 |     dev: false
433 | 
434 |   /mime-types/2.1.35:
435 |     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
436 |     engines: {node: '>= 0.6'}
437 |     dependencies:
438 |       mime-db: 1.52.0
439 |     dev: false
440 | 
441 |   /mime/1.6.0:
442 |     resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
443 |     engines: {node: '>=4'}
444 |     hasBin: true
445 |     dev: false
446 | 
447 |   /minimatch/3.1.2:
448 |     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
449 |     dependencies:
450 |       brace-expansion: 1.1.11
451 |     dev: false
452 | 
453 |   /ms/2.0.0:
454 |     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
455 |     dev: false
456 | 
457 |   /ms/2.1.3:
458 |     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
459 |     dev: false
460 | 
461 |   /negotiator/0.6.3:
462 |     resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
463 |     engines: {node: '>= 0.6'}
464 |     dev: false
465 | 
466 |   /nodemon/2.0.20:
467 |     resolution: {integrity: sha512-Km2mWHKKY5GzRg6i1j5OxOHQtuvVsgskLfigG25yTtbyfRGn/GNvIbRyOf1PSCKJ2aT/58TiuUsuOU5UToVViw==}
468 |     engines: {node: '>=8.10.0'}
469 |     hasBin: true
470 |     dependencies:
471 |       chokidar: 3.5.3
472 |       debug: 3.2.7_supports-color@5.5.0
473 |       ignore-by-default: 1.0.1
474 |       minimatch: 3.1.2
475 |       pstree.remy: 1.1.8
476 |       semver: 5.7.1
477 |       simple-update-notifier: 1.1.0
478 |       supports-color: 5.5.0
479 |       touch: 3.1.0
480 |       undefsafe: 2.0.5
481 |     dev: false
482 | 
483 |   /nopt/1.0.10:
484 |     resolution: {integrity: sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==}
485 |     hasBin: true
486 |     dependencies:
487 |       abbrev: 1.1.1
488 |     dev: false
489 | 
490 |   /normalize-path/3.0.0:
491 |     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
492 |     engines: {node: '>=0.10.0'}
493 |     dev: false
494 | 
495 |   /object-assign/4.1.1:
496 |     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
497 |     engines: {node: '>=0.10.0'}
498 |     dev: false
499 | 
500 |   /object-inspect/1.12.2:
501 |     resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
502 |     dev: false
503 | 
504 |   /on-finished/2.4.1:
505 |     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
506 |     engines: {node: '>= 0.8'}
507 |     dependencies:
508 |       ee-first: 1.1.1
509 |     dev: false
510 | 
511 |   /openai/3.1.0:
512 |     resolution: {integrity: sha512-v5kKFH5o+8ld+t0arudj833Mgm3GcgBnbyN9946bj6u7bvel4Yg6YFz2A4HLIYDzmMjIo0s6vSG9x73kOwvdCg==}
513 |     dependencies:
514 |       axios: 0.26.1
515 |       form-data: 4.0.0
516 |     transitivePeerDependencies:
517 |       - debug
518 |     dev: false
519 | 
520 |   /parseurl/1.3.3:
521 |     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
522 |     engines: {node: '>= 0.8'}
523 |     dev: false
524 | 
525 |   /path-to-regexp/0.1.7:
526 |     resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
527 |     dev: false
528 | 
529 |   /picomatch/2.3.1:
530 |     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
531 |     engines: {node: '>=8.6'}
532 |     dev: false
533 | 
534 |   /proxy-addr/2.0.7:
535 |     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
536 |     engines: {node: '>= 0.10'}
537 |     dependencies:
538 |       forwarded: 0.2.0
539 |       ipaddr.js: 1.9.1
540 |     dev: false
541 | 
542 |   /pstree.remy/1.1.8:
543 |     resolution: {integrity: sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==}
544 |     dev: false
545 | 
546 |   /qs/6.11.0:
547 |     resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==}
548 |     engines: {node: '>=0.6'}
549 |     dependencies:
550 |       side-channel: 1.0.4
551 |     dev: false
552 | 
553 |   /range-parser/1.2.1:
554 |     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
555 |     engines: {node: '>= 0.6'}
556 |     dev: false
557 | 
558 |   /raw-body/2.5.1:
559 |     resolution: {integrity: sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==}
560 |     engines: {node: '>= 0.8'}
561 |     dependencies:
562 |       bytes: 3.1.2
563 |       http-errors: 2.0.0
564 |       iconv-lite: 0.4.24
565 |       unpipe: 1.0.0
566 |     dev: false
567 | 
568 |   /readdirp/3.6.0:
569 |     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
570 |     engines: {node: '>=8.10.0'}
571 |     dependencies:
572 |       picomatch: 2.3.1
573 |     dev: false
574 | 
575 |   /safe-buffer/5.2.1:
576 |     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
577 |     dev: false
578 | 
579 |   /safer-buffer/2.1.2:
580 |     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
581 |     dev: false
582 | 
583 |   /semver/5.7.1:
584 |     resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
585 |     hasBin: true
586 |     dev: false
587 | 
588 |   /semver/7.0.0:
589 |     resolution: {integrity: sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==}
590 |     hasBin: true
591 |     dev: false
592 | 
593 |   /send/0.18.0:
594 |     resolution: {integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==}
595 |     engines: {node: '>= 0.8.0'}
596 |     dependencies:
597 |       debug: 2.6.9
598 |       depd: 2.0.0
599 |       destroy: 1.2.0
600 |       encodeurl: 1.0.2
601 |       escape-html: 1.0.3
602 |       etag: 1.8.1
603 |       fresh: 0.5.2
604 |       http-errors: 2.0.0
605 |       mime: 1.6.0
606 |       ms: 2.1.3
607 |       on-finished: 2.4.1
608 |       range-parser: 1.2.1
609 |       statuses: 2.0.1
610 |     transitivePeerDependencies:
611 |       - supports-color
612 |     dev: false
613 | 
614 |   /serve-static/1.15.0:
615 |     resolution: {integrity: sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==}
616 |     engines: {node: '>= 0.8.0'}
617 |     dependencies:
618 |       encodeurl: 1.0.2
619 |       escape-html: 1.0.3
620 |       parseurl: 1.3.3
621 |       send: 0.18.0
622 |     transitivePeerDependencies:
623 |       - supports-color
624 |     dev: false
625 | 
626 |   /setprototypeof/1.2.0:
627 |     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
628 |     dev: false
629 | 
630 |   /side-channel/1.0.4:
631 |     resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
632 |     dependencies:
633 |       call-bind: 1.0.2
634 |       get-intrinsic: 1.1.3
635 |       object-inspect: 1.12.2
636 |     dev: false
637 | 
638 |   /simple-update-notifier/1.1.0:
639 |     resolution: {integrity: sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==}
640 |     engines: {node: '>=8.10.0'}
641 |     dependencies:
642 |       semver: 7.0.0
643 |     dev: false
644 | 
645 |   /statuses/2.0.1:
646 |     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
647 |     engines: {node: '>= 0.8'}
648 |     dev: false
649 | 
650 |   /supports-color/5.5.0:
651 |     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
652 |     engines: {node: '>=4'}
653 |     dependencies:
654 |       has-flag: 3.0.0
655 |     dev: false
656 | 
657 |   /to-regex-range/5.0.1:
658 |     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
659 |     engines: {node: '>=8.0'}
660 |     dependencies:
661 |       is-number: 7.0.0
662 |     dev: false
663 | 
664 |   /toidentifier/1.0.1:
665 |     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
666 |     engines: {node: '>=0.6'}
667 |     dev: false
668 | 
669 |   /touch/3.1.0:
670 |     resolution: {integrity: sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==}
671 |     hasBin: true
672 |     dependencies:
673 |       nopt: 1.0.10
674 |     dev: false
675 | 
676 |   /type-is/1.6.18:
677 |     resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
678 |     engines: {node: '>= 0.6'}
679 |     dependencies:
680 |       media-typer: 0.3.0
681 |       mime-types: 2.1.35
682 |     dev: false
683 | 
684 |   /undefsafe/2.0.5:
685 |     resolution: {integrity: sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==}
686 |     dev: false
687 | 
688 |   /unpipe/1.0.0:
689 |     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
690 |     engines: {node: '>= 0.8'}
691 |     dev: false
692 | 
693 |   /utils-merge/1.0.1:
694 |     resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
695 |     engines: {node: '>= 0.4.0'}
696 |     dev: false
697 | 
698 |   /vary/1.1.2:
699 |     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
700 |     engines: {node: '>= 0.8'}
701 |     dev: false
702 | 


--------------------------------------------------------------------------------
/server/server.js:
--------------------------------------------------------------------------------
  1 | import express from 'express' //backend server framework
  2 | import * as dotenv from 'dotenv' // access and use API KEY stored in .env file
  3 | import cors from 'cors' //allow make cross origin API request to server from frontend
  4 | import allowedOrigins from './whitelist.js'; //allowed domains only
  5 | import { Configuration, OpenAIApi } from 'openai' //Openai API wrapper
  6 | import { toChatML, get_message } from "gpt-to-chatgpt"; //using this as wrapper to make chatgpt api call work till official openai package is upgraded
  7 | 
  8 | 
  9 | //call config function to give access to .env API KEY variable
 10 | dotenv.config() 
 11 | 
 12 | 
 13 | //Openai API wrapper function which accepts API KEY as object parameter
 14 | const configuration = new Configuration({
 15 |   apiKey: process.env.OPENAI_API_KEY,
 16 | });
 17 | 
 18 | 
 19 | // create instance of Openai and pass in the configuration object created above
 20 | const openai = new OpenAIApi(configuration);
 21 | 
 22 | 
 23 | // initialize expressjs server
 24 | const app = express()
 25 | 
 26 | 
 27 | // configure the cors middleware to allow accepting and processing request from allowed domains
 28 | app.use(cors({
 29 |   origin: (origin, callback) => {
 30 |     // check if the origin is in the allowed origins array
 31 |     if (allowedOrigins.indexOf(origin) !== -1) {
 32 |       callback(null, true);
 33 |     } else {
 34 |       callback(new Error('Not allowed by CORS'));
 35 |     }
 36 |   }
 37 | }));
 38 | 
 39 | 
 40 | //middleware: allows the backend to recieve and acces request from frontend as a json object
 41 | // rather than just a string. 
 42 | // This is necessary in the following POST request route code: 
 43 | // app.post('/', async (req, res) => {
 44 | // try {const prompt = req.body.prompt; 
 45 | // where it uses req.body to get the prompt data/question sent in the post request
 46 | // from our chatGPT Ai chatBot SvelteKit powered frontend
 47 | app.use(express.json())
 48 | 
 49 | 
 50 | // routes/endpoint to expose expressjs backend to frontend "GET" request
 51 | // with a return statement of info to show user visiting the route
 52 | // "started on http://localhost:5001" makes the port link clickable from terminal
 53 | app.get('/', async (req, res) => {
 54 |   res.status(200).send({
 55 |     message: 'Hello Web3 AI World from Foskaay AI',
 56 |   })
 57 | })
 58 | 
 59 | 
 60 | //route/endpoint which allows Expressjs backend to recieve and process
 61 | // the request sent from users of our chatGPT Ai chatBot SvelteKit powered frontend
 62 | app.post('/', async (req, res) => {
 63 | 
 64 |     // check if the origin is in the allowed origins array/whitelist domains 
 65 |     // before processing request
 66 |     if (!allowedOrigins.includes(req.headers.origin)) {
 67 |       return res.status(401).send({ message: 'Unauthorized: Origin not allowed' });
 68 |     }
 69 |   
 70 |   try {
 71 |     const prompt = req.body.prompt; //access user question submited as prompt
 72 | 
 73 |     //Initiate an API call to Openai's API to recieve response for user questions 
 74 |     //from Openai's AI
 75 |     // But while making the call we bundle the user question/prompt and other
 76 |     // instructions to ensure we get the best response from the AI back to user
 77 |     openai.createChatCompletion({
 78 |       model: "gpt-3.5-turbo",
 79 |       messages: toChatML((prompt)) 
 80 |     }).then((data) => {
 81 |       const aiResponse = get_message(data.data);
 82 |       // console.log(aiResponse); // Log the response to the console for confirmation
 83 |       // console.log((get_message(data.data)));
 84 |       
 85 |       // Send the response back to the frontend
 86 |      res.status(200).send({
 87 |        ai: aiResponse,
 88 |      }); 
 89 |     });
 90 | 
 91 | 
 92 |     // logs error to the console and sends it back our chatGPT Ai chatBot SvelteKit powered frontend
 93 |     //with a status of 500 if there is any error caught in try block.
 94 |   } catch (error) {
 95 |     console.log(error);
 96 |     res.status(400).send({
 97 |       message: error.message,
 98 |     });
 99 |   }
100 | })
101 | 
102 | 
103 | // start the server on specified port on localhost
104 | // this get overriden when deployed to web server by the server url
105 | app.listen(5000, () => console.log('Foskaay Ai server started on http://localhost:5000'))


--------------------------------------------------------------------------------
/server/serverGPT3API.js:
--------------------------------------------------------------------------------
  1 | import express from 'express' //backend server framework
  2 | import * as dotenv from 'dotenv' // access and use API KEY stored in .env file
  3 | import cors from 'cors' //allow make cross origin API request to server from frontend
  4 | import allowedOrigins from './whitelist.js'; //allowed domains only
  5 | import { Configuration, OpenAIApi } from 'openai' //Openai API wrapper
  6 | 
  7 | 
  8 | //call config function to give access to .env API KEY variable
  9 | dotenv.config() 
 10 | 
 11 | 
 12 | //Openai API wrapper function which accepts API KEY as object parameter
 13 | const configuration = new Configuration({
 14 |   apiKey: process.env.OPENAI_API_KEY,
 15 | });
 16 | 
 17 | 
 18 | // create instance of Openai and pass in the configuration object created above
 19 | const openai = new OpenAIApi(configuration);
 20 | 
 21 | 
 22 | // initialize expressjs server
 23 | const app = express()
 24 | 
 25 | 
 26 | // configure the cors middleware to allow accepting and processing request from allowed domains
 27 | app.use(cors({
 28 |   origin: (origin, callback) => {
 29 |     // check if the origin is in the allowed origins array
 30 |     if (allowedOrigins.indexOf(origin) !== -1) {
 31 |       callback(null, true);
 32 |     } else {
 33 |       callback(new Error('Not allowed by CORS'));
 34 |     }
 35 |   }
 36 | }));
 37 | 
 38 | 
 39 | //middleware: allows the backend to recieve and acces request from frontend as a json object
 40 | // rather than just a string. 
 41 | // This is necessary in the following POST request route code: 
 42 | // app.post('/', async (req, res) => {
 43 | // try {const prompt = req.body.prompt; 
 44 | // where it uses req.body to get the prompt data/question sent in the post request
 45 | // from our chatGPT Ai chatBot SvelteKit powered frontend
 46 | app.use(express.json())
 47 | 
 48 | 
 49 | // routes/endpoint to expose expressjs backend to frontend "GET" request
 50 | // with a return statement of info to show user visiting the route
 51 | // "started on http://localhost:5001" makes the port link clickable from terminal
 52 | app.get('/', async (req, res) => {
 53 |   res.status(200).send({
 54 |     message: 'Hello Web3 AI World from Foskaay AI',
 55 |   })
 56 | })
 57 | 
 58 | 
 59 | //route/endpoint which allows Expressjs backend to recieve and process
 60 | // the request sent from users of our chatGPT Ai chatBot SvelteKit powered frontend
 61 | app.post('/', async (req, res) => {
 62 | 
 63 |     // check if the origin is in the allowed origins array/whitelist domains 
 64 |     // before processing request
 65 |     if (!allowedOrigins.includes(req.headers.origin)) {
 66 |       return res.status(401).send({ message: 'Unauthorized: Origin not allowed' });
 67 |     }
 68 |   
 69 |   try {
 70 |     const prompt = req.body.prompt; //access user question submited as prompt
 71 | 
 72 |     //Initiate an API call to Openai's API to recieve response for user questions 
 73 |     //from Openai's AI
 74 |     // But while making the call we bundle the user question/prompt and other
 75 |     // instructions to ensure we get the best response from the AI back to user
 76 |     const response = await openai.createCompletion({
 77 |       model: "text-davinci-003", //most powerful openai large language Ai model for now
 78 |       prompt: `${prompt}`, //input text value of the form input box in sveltekit app ui
 79 |       temperature: 1, // Higher values means the model will take more risks and can change/modify response for same question when asked again.
 80 |       max_tokens: 3000, // If not specified, it auto limit reponses usually less than 50 character (thats about 50 words)The maximum number of tokens to generate in the completion. Most models have a context length of 2048 tokens (except for the newest models, which support over 8,000).
 81 |       top_p: 1, // alternative to sampling with temperature, called nucleus sampling
 82 |       frequency_penalty: 0.5, // Number between -2.0 and 2.0. Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model's likelihood to repeat the same line verbatim.
 83 |       presence_penalty: 0, // Number between -2.0 and 2.0. Positive values penalize new tokens based on whether they appear in the text so far, increasing the model's likelihood to talk about new topics.
 84 |       // user: "user123456", // optional but can be useful to detect user abusing your API request. You can use session ID or hash email/psw so each user is unique but still not individually identificable for openai
 85 |     });
 86 | 
 87 |     //Send the AI response back to user of 
 88 |     // our chatGPT Ai chatBot SvelteKit powered frontend 
 89 |     //in json format with a success status code of 200. 
 90 |     res.status(200).send({
 91 |       ai: response.data.choices[0].text
 92 |     });
 93 | 
 94 | 
 95 |     // logs error to the console and sends it back our chatGPT Ai chatBot SvelteKit powered frontend
 96 |     //with a status of 500 if there is any error caught in try block.
 97 |   } catch (error) {
 98 |     console.error(error)
 99 |     res.status(500).send(error || 'Something went wrong communicating with Ai Foskaay');
100 |   }
101 | })
102 | 
103 | 
104 | // start the server on specified port on localhost
105 | // this get overriden when deployed to web server by the server url
106 | app.listen(5000, () => console.log('Foskaay Ai server started on http://localhost:5000'))


--------------------------------------------------------------------------------
/server/whitelist.js:
--------------------------------------------------------------------------------
1 | // allowed origins is an array of allowed domains
2 | const allowedOrigins = ['https://foskaay.aihipuniversity.com'];
3 | 
4 | export default allowedOrigins;


--------------------------------------------------------------------------------
/server/whitelist.js.Example:
--------------------------------------------------------------------------------
 1 | // Rename this file from whitelist.js.Example to whitelist.js
 2 | // Never allow localhost in your production server whitelist 
 3 | // because anyone can connect as whitelisted domain once they runing on local host
 4 | //You can add as many whitelist domains as you want
 5 | 
 6 | // allowed origins is an array of allowed domains
 7 | const allowedOrigins = ['https://example.com','http://localhost:5173'];
 8 | 
 9 | export default allowedOrigins;
10 | 


--------------------------------------------------------------------------------
/ui/.eslintignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/ui/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	parser: '@typescript-eslint/parser',
 4 | 	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
 5 | 	plugins: ['svelte3', '@typescript-eslint'],
 6 | 	ignorePatterns: ['*.cjs'],
 7 | 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 8 | 	settings: {
 9 | 		'svelte3/typescript': () => require('typescript')
10 | 	},
11 | 	parserOptions: {
12 | 		sourceType: 'module',
13 | 		ecmaVersion: 2020
14 | 	},
15 | 	env: {
16 | 		browser: true,
17 | 		es2017: true,
18 | 		node: true
19 | 	}
20 | };
21 | 


--------------------------------------------------------------------------------
/ui/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | vite.config.js.timestamp-*
10 | vite.config.ts.timestamp-*
11 | 


--------------------------------------------------------------------------------
/ui/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/ui/.prettierignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/ui/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"useTabs": true,
 3 | 	"singleQuote": true,
 4 | 	"trailingComma": "none",
 5 | 	"printWidth": 100,
 6 | 	"plugins": ["prettier-plugin-svelte"],
 7 | 	"pluginSearchDirs": ["."],
 8 | 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 9 | }
10 | 


--------------------------------------------------------------------------------
/ui/README.md:
--------------------------------------------------------------------------------
 1 | # create-svelte
 2 | 
 3 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
 4 | 
 5 | ## Creating a project
 6 | 
 7 | If you're seeing this, you've probably already done this step. Congrats!
 8 | 
 9 | ```bash
10 | # create a new project in the current directory
11 | npm create svelte@latest
12 | 
13 | # create a new project in my-app
14 | npm create svelte@latest my-app
15 | ```
16 | 
17 | ## Developing
18 | 
19 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
20 | 
21 | ```bash
22 | npm run dev
23 | 
24 | # or start the server and open the app in a new browser tab
25 | npm run dev -- --open
26 | ```
27 | 
28 | ## Building
29 | 
30 | To create a production version of your app:
31 | 
32 | ```bash
33 | npm run build
34 | ```
35 | 
36 | You can preview the production build with `npm run preview`.
37 | 
38 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
39 | 


--------------------------------------------------------------------------------
/ui/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "ui",
 3 | 	"version": "0.0.1",
 4 | 	"private": true,
 5 | 	"scripts": {
 6 | 		"dev": "vite dev",
 7 | 		"build": "vite build",
 8 | 		"preview": "vite preview",
 9 | 		"test": "playwright test",
10 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
11 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
12 | 		"test:unit": "vitest",
13 | 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
14 | 		"format": "prettier --plugin-search-dir . --write ."
15 | 	},
16 | 	"devDependencies": {
17 | 		"@playwright/test": "^1.28.1",
18 | 		"@sveltejs/adapter-auto": "^2.0.0",
19 | 		"@sveltejs/kit": "^1.5.0",
20 | 		"@typescript-eslint/eslint-plugin": "^5.45.0",
21 | 		"@typescript-eslint/parser": "^5.45.0",
22 | 		"eslint": "^8.28.0",
23 | 		"eslint-config-prettier": "^8.5.0",
24 | 		"eslint-plugin-svelte3": "^4.0.0",
25 | 		"prettier": "^2.8.0",
26 | 		"prettier-plugin-svelte": "^2.8.1",
27 | 		"svelte": "^3.54.0",
28 | 		"svelte-check": "^3.0.1",
29 | 		"svelte-prism": "^1.1.6",
30 | 		"tslib": "^2.4.1",
31 | 		"typescript": "^4.9.3",
32 | 		"vite": "^4.0.0",
33 | 		"vitest": "^0.25.3",
34 | 		"postcss": "^8.4.14",
35 | 		"postcss-load-config": "^4.0.1",
36 | 		"svelte-preprocess": "^4.10.7",
37 | 		"autoprefixer": "^10.4.7",
38 | 		"tailwindcss": "^3.1.5"
39 | 	},
40 | 	"type": "module",
41 | 	"dependencies": {
42 | 		"uuid": "^9.0.0"
43 | 	}
44 | }
45 | 


--------------------------------------------------------------------------------
/ui/playwright.config.ts:
--------------------------------------------------------------------------------
 1 | import type { PlaywrightTestConfig } from '@playwright/test';
 2 | 
 3 | const config: PlaywrightTestConfig = {
 4 | 	webServer: {
 5 | 		command: 'npm run build && npm run preview',
 6 | 		port: 4173
 7 | 	},
 8 | 	testDir: 'tests'
 9 | };
10 | 
11 | export default config;
12 | 


--------------------------------------------------------------------------------
/ui/postcss.config.cjs:
--------------------------------------------------------------------------------
 1 | const tailwindcss = require('tailwindcss');
 2 | const autoprefixer = require('autoprefixer');
 3 | 
 4 | const config = {
 5 | 	plugins: [
 6 | 		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
 7 | 		tailwindcss(),
 8 | 		//But others, like autoprefixer, need to run after,
 9 | 		autoprefixer
10 | 	]
11 | };
12 | 
13 | module.exports = config;
14 | 


--------------------------------------------------------------------------------
/ui/src/DeclarationFile.d.ts:
--------------------------------------------------------------------------------
1 | //Declaration file to help resolve conflict between typescript and modules not identified after been properly installed.
2 | // this help resolve module not found error when importing packages modules
3 | 
4 | //declare uuid package module
5 | declare module 'uuid';
6 | 
7 | 


--------------------------------------------------------------------------------
/ui/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | // See https://kit.svelte.dev/docs/types#app
 2 | // for information about these interfaces
 3 | declare global {
 4 | 	namespace App {
 5 | 		// interface Error {}
 6 | 		// interface Locals {}
 7 | 		// interface PageData {}
 8 | 		// interface Platform {}
 9 | 	}
10 | }
11 | 
12 | export {};
13 | 


--------------------------------------------------------------------------------
/ui/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 6 | 		<meta name="viewport" content="width=device-width" />
 7 | 		%sveltekit.head%
 8 | 	</head>
 9 | 	<body data-sveltekit-preload-data="hover">
10 | 		<div style="display: contents">%sveltekit.body%</div>
11 | 	</body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/ui/src/app.postcss:
--------------------------------------------------------------------------------
1 | /* Write your global styles here, in PostCSS syntax */
2 | @tailwind base;
3 | @tailwind components;
4 | @tailwind utilities;
5 | 


--------------------------------------------------------------------------------
/ui/src/index.test.ts:
--------------------------------------------------------------------------------
1 | import { describe, it, expect } from 'vitest';
2 | 
3 | describe('sum test', () => {
4 | 	it('adds 1 + 2 to equal 3', () => {
5 | 		expect(1 + 2).toBe(3);
6 | 	});
7 | });
8 | 


--------------------------------------------------------------------------------
/ui/src/lib/images/banner1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AiHiPUniversity/ai-chatbot-openai-sveltekit-boilerplate-1/abde58b12363206eae0af605ba920b67adf89c38/ui/src/lib/images/banner1.jpg


--------------------------------------------------------------------------------
/ui/src/lib/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AiHiPUniversity/ai-chatbot-openai-sveltekit-boilerplate-1/abde58b12363206eae0af605ba920b67adf89c38/ui/src/lib/images/favicon.png


--------------------------------------------------------------------------------
/ui/src/lib/images/github.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 30 30">
 2 | 	<path
 3 | 		fill-rule="evenodd"
 4 | 		clip-rule="evenodd"
 5 | 		d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2ZM0 12C0 5.3726 5.3726 0 12 0C18.6274 0 24 5.3726 24 12C24 18.6274 18.6274 24 12 24C5.3726 24 0 18.6274 0 12Z"
 6 | 		fill="rgba(0,0,0,0.7)"
 7 | 		stroke="none"
 8 | 	/>
 9 | 	<path
10 | 		fill-rule="evenodd"
11 | 		clip-rule="evenodd"
12 | 		d="M9.59162 22.7357C9.49492 22.6109 9.49492 21.4986 9.59162 19.399C8.55572 19.4347 7.90122 19.3628 7.62812 19.1833C7.21852 18.9139 6.80842 18.0833 6.44457 17.4979C6.08072 16.9125 5.27312 16.8199 4.94702 16.6891C4.62091 16.5582 4.53905 16.0247 5.84562 16.4282C7.15222 16.8316 7.21592 17.9303 7.62812 18.1872C8.04032 18.4441 9.02572 18.3317 9.47242 18.1259C9.91907 17.9201 9.88622 17.1538 9.96587 16.8503C10.0666 16.5669 9.71162 16.5041 9.70382 16.5018C9.26777 16.5018 6.97697 16.0036 6.34772 13.7852C5.71852 11.5669 6.52907 10.117 6.96147 9.49369C7.24972 9.07814 7.22422 8.19254 6.88497 6.83679C8.11677 6.67939 9.06732 7.06709 9.73672 7.99999C9.73737 8.00534 10.6143 7.47854 12.0001 7.47854C13.386 7.47854 13.8777 7.90764 14.2571 7.99999C14.6365 8.09234 14.94 6.36699 17.2834 6.83679C16.7942 7.79839 16.3844 8.99999 16.6972 9.49369C17.0099 9.98739 18.2372 11.5573 17.4833 13.7852C16.9807 15.2706 15.9927 16.1761 14.5192 16.5018C14.3502 16.5557 14.2658 16.6427 14.2658 16.7627C14.2658 16.9427 14.4942 16.9624 14.8233 17.8058C15.0426 18.368 15.0585 19.9739 14.8708 22.6234C14.3953 22.7445 14.0254 22.8257 13.7611 22.8673C13.2924 22.9409 12.7835 22.9822 12.2834 22.9982C11.7834 23.0141 11.6098 23.0123 10.9185 22.948C10.4577 22.9051 10.0154 22.8343 9.59162 22.7357Z"
13 | 		fill="rgba(0,0,0,0.7)"
14 | 		stroke="none"
15 | 	/>
16 | </svg>


--------------------------------------------------------------------------------
/ui/src/lib/images/svelte-logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>


--------------------------------------------------------------------------------
/ui/src/lib/images/svelte-welcome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AiHiPUniversity/ai-chatbot-openai-sveltekit-boilerplate-1/abde58b12363206eae0af605ba920b67adf89c38/ui/src/lib/images/svelte-welcome.png


--------------------------------------------------------------------------------
/ui/src/lib/images/svelte-welcome.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AiHiPUniversity/ai-chatbot-openai-sveltekit-boilerplate-1/abde58b12363206eae0af605ba920b67adf89c38/ui/src/lib/images/svelte-welcome.webp


--------------------------------------------------------------------------------
/ui/src/lib/styles/chat.css:
--------------------------------------------------------------------------------
 1 | /* style the chat appearance */
 2 | 
 3 | #new-chat {
 4 |     width: 100%;
 5 |     display: block;
 6 |     padding: 10px;
 7 |     font-size: 1.2em;
 8 |     background-color: #333;
 9 |     color: white;
10 |     border: none;
11 |     cursor: pointer;
12 |     margin-bottom: 10px;
13 |   }
14 |   
15 |   #prompts {
16 |     display: flex;
17 |     flex-wrap: wrap;
18 |   }
19 |   
20 |   .prompts-section,
21 |   .features-section {
22 |     width: 50%;
23 |   }
24 |   
25 |   .prompts-section {
26 |     text-align: right;
27 |   }
28 |   
29 |   .features-section {
30 |     text-align: left;
31 |   }
32 |   
33 |   h2 {
34 |     margin: 0;
35 |   }
36 |   
37 |   .prompt {
38 |     display: block;
39 |     margin: 0;
40 |     padding: 5px 10px;
41 |     font-size: 0.9em;
42 |     background-color: #eee;
43 |     color: #333;
44 |     cursor: pointer;
45 |   }
46 |   
47 |   .prompt:hover {
48 |     background-color: #ddd;
49 |   }
50 |   
51 |   ul {
52 |     list-style: none;
53 |     margin: 0;
54 |     padding: 0;
55 |   }
56 |   
57 |   li {
58 |     margin: 5px 0;
59 |   }
60 |   


--------------------------------------------------------------------------------
/ui/src/lib/styles/prism-okaidia.css:
--------------------------------------------------------------------------------
  1 | /* 
  2 | This is Prism theme used with svelte-prism 
  3 | 
  4 | Svelte-Prism: https://www.npmjs.com/package/svelte-prism
  5 | --------------------------------
  6 | Theme Name: prism-okaidia
  7 | 
  8 | Css Code Link: 
  9 | https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-okaidia.min.css
 10 | 
 11 | Css Code Link Source Map (download and copy the code to the end of this file):
 12 |  https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-okaidia.min.css
 13 | 
 14 | */
 15 | 
 16 | code[class*='language-'],
 17 | pre[class*='language-'] {
 18 | 	color: #f8f8f2;
 19 | 	background: 0 0;
 20 | 	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
 21 | 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 22 | 	font-size: 1em;
 23 | 	text-align: left;
 24 | 	white-space: pre;
 25 | 	word-spacing: normal;
 26 | 	word-break: normal;
 27 | 	word-wrap: normal;
 28 | 	line-height: 1.5;
 29 | 	-moz-tab-size: 4;
 30 | 	-o-tab-size: 4;
 31 | 	tab-size: 4;
 32 | 	-webkit-hyphens: none;
 33 | 	-moz-hyphens: none;
 34 | 	-ms-hyphens: none;
 35 | 	hyphens: none;
 36 | }
 37 | pre[class*='language-'] {
 38 | 	padding: 1em;
 39 | 	margin: 0.5em 0;
 40 | 	overflow: auto;
 41 | 	border-radius: 0.3em;
 42 | }
 43 | :not(pre) > code[class*='language-'],
 44 | pre[class*='language-'] {
 45 | 	background: #272822;
 46 | }
 47 | :not(pre) > code[class*='language-'] {
 48 | 	padding: 0.1em;
 49 | 	border-radius: 0.3em;
 50 | 	white-space: normal;
 51 | }
 52 | .token.cdata,
 53 | .token.comment,
 54 | .token.doctype,
 55 | .token.prolog {
 56 | 	color: #708090;
 57 | }
 58 | .token.punctuation {
 59 | 	color: #f8f8f2;
 60 | }
 61 | .namespace {
 62 | 	opacity: 0.7;
 63 | }
 64 | .token.constant,
 65 | .token.deleted,
 66 | .token.property,
 67 | .token.symbol,
 68 | .token.tag {
 69 | 	color: #f92672;
 70 | }
 71 | .token.boolean,
 72 | .token.number {
 73 | 	color: #ae81ff;
 74 | }
 75 | .token.attr-name,
 76 | .token.builtin,
 77 | .token.char,
 78 | .token.inserted,
 79 | .token.selector,
 80 | .token.string {
 81 | 	color: #a6e22e;
 82 | }
 83 | .language-css .token.string,
 84 | .style .token.string,
 85 | .token.entity,
 86 | .token.operator,
 87 | .token.url,
 88 | .token.variable {
 89 | 	color: #f8f8f2;
 90 | }
 91 | .token.atrule,
 92 | .token.attr-value,
 93 | .token.class-name,
 94 | .token.function {
 95 | 	color: #e6db74;
 96 | }
 97 | .token.keyword {
 98 | 	color: #66d9ef;
 99 | }
100 | .token.important,
101 | .token.regex {
102 | 	color: #fd971f;
103 | }
104 | .token.bold,
105 | .token.important {
106 | 	font-weight: 700;
107 | }
108 | .token.italic {
109 | 	font-style: italic;
110 | }
111 | .token.entity {
112 | 	cursor: help;
113 | }
114 | /*# sourceMappingURL=prism-okaidia.min.css.map */
115 | {
116 | 	"version": 3,
117 | 	"sources": [
118 | 		"prism-okaidia.css"
119 | 	];
120 | 	"names": [],
121 | 	"mappings": "AAMA,uBACA,sBACC,MAAO,QACP,WAAY,IACZ,YAAa,EAAE,IAAI,eACnB,YAAa,QAAQ,CAAE,MAAM,CAAE,aAAa,CAAE,aAAa,CAAE,UAC7D,UAAW,IACX,WAAY,KACZ,YAAa,IACb,aAAc,OACd,WAAY,OACZ,UAAW,OACX,YAAa,IAEb,cAAe,EACf,YAAa,EACb,SAAU,EAEV,gBAAiB,KACjB,aAAc,KACd,YAAa,KACb,QAAS,KAIV,sBACC,QAAS,IACT,OAAQ,KAAK,EACb,SAAU,KACV,cAAe,KAGhB,iCACA,sBACC,WAAY,QAIb,iCACC,QAAS,KACT,cAAe,KACf,YAAa,OAMd,aAHA,eAEA,eADA,cAGC,MAAO,QAGR,mBACC,MAAO,QAGR,WACC,QAAS,GAKV,gBAEA,eAJA,gBAGA,cAFA,WAIC,MAAO,QAGR,eACA,cACC,MAAO,QAIR,iBAGA,eADA,YAEA,gBALA,gBAEA,cAIC,MAAO,QAMR,4BACA,qBAHA,cADA,gBAEA,WAGA,gBACC,MAAO,QAGR,cACA,kBAEA,kBADA,gBAEC,MAAO,QAGR,eACC,MAAO,QAIR,iBADA,aAEC,MAAO,QAIR,YADA,iBAEC,YAAa,IAEd,cACC,WAAY,OAGb,cACC,OAAQ"
122 | }
123 | 
124 | /* other custom styles not included in the default theme above */
125 | 
126 | /* .code-block {
127 |     Add styles for the code block here
128 |   }
129 | 
130 |   .scrollable-code-block {
131 |     Add a scrollbar to the code block
132 |     overflow-y: scroll;
133 |     Set a maximum height for the code block
134 |     max-height: 500px;
135 |   } */


--------------------------------------------------------------------------------
/ui/src/lib/styles/prism-okaidiaOLD.css:
--------------------------------------------------------------------------------
  1 | /* This is Prism theme used with svelte-prism 
  2 | Svelte-Prism: https://www.npmjs.com/package/svelte-prism
  3 | --------------------------------
  4 | Theme Name: prism-okaidia
  5 | Css Code Link: https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-okaidia.min.css
  6 | */
  7 | 
  8 | code[class*='language-'],
  9 | pre[class*='language-'] {
 10 | 	color: #f8f8f2;
 11 | 	background: 0 0;
 12 | 	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
 13 | 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 14 | 	font-size: 1em;
 15 | 	text-align: left;
 16 | 	white-space: pre;
 17 | 	word-spacing: normal;
 18 | 	word-break: normal;
 19 | 	word-wrap: normal;
 20 | 	line-height: 1.5;
 21 | 	-moz-tab-size: 4;
 22 | 	-o-tab-size: 4;
 23 | 	tab-size: 4;
 24 | 	-webkit-hyphens: none;
 25 | 	-moz-hyphens: none;
 26 | 	-ms-hyphens: none;
 27 | 	hyphens: none;
 28 |     /* customization added */
 29 |     /* Add a scrollbar to the code block */
 30 |     overflow-y: scroll;   
 31 |     /* Set a maximum height for the code block */
 32 |     max-height: 870px;     
 33 | }
 34 | pre[class*='language-'] {
 35 | 	padding: 1em;
 36 | 	margin: 0.5em 0;
 37 | 	overflow: auto;
 38 | 	border-radius: 0.3em;
 39 | }
 40 | :not(pre) > code[class*='language-'],
 41 | pre[class*='language-'] {
 42 | 	background: #272822;
 43 | }
 44 | :not(pre) > code[class*='language-'] {
 45 | 	padding: 0.1em;
 46 | 	border-radius: 0.3em;
 47 | 	white-space: normal;
 48 | }
 49 | .token.cdata,
 50 | .token.comment,
 51 | .token.doctype,
 52 | .token.prolog {
 53 | 	color: #708090;
 54 | }
 55 | .token.punctuation {
 56 | 	color: #f8f8f2;
 57 | }
 58 | .namespace {
 59 | 	opacity: 0.7;
 60 | }
 61 | .token.constant,
 62 | .token.deleted,
 63 | .token.property,
 64 | .token.symbol,
 65 | .token.tag {
 66 | 	color: #f92672;
 67 | }
 68 | .token.boolean,
 69 | .token.number {
 70 | 	color: #ae81ff;
 71 | }
 72 | .token.attr-name,
 73 | .token.builtin,
 74 | .token.char,
 75 | .token.inserted,
 76 | .token.selector,
 77 | .token.string {
 78 | 	color: #a6e22e;
 79 | }
 80 | .language-css .token.string,
 81 | .style .token.string,
 82 | .token.entity,
 83 | .token.operator,
 84 | .token.url,
 85 | .token.variable {
 86 | 	color: #f8f8f2;
 87 | }
 88 | .token.atrule,
 89 | .token.attr-value,
 90 | .token.class-name,
 91 | .token.function {
 92 | 	color: #e6db74;
 93 | }
 94 | .token.keyword {
 95 | 	color: #66d9ef;
 96 | }
 97 | .token.important,
 98 | .token.regex {
 99 | 	color: #fd971f;
100 | }
101 | .token.bold,
102 | .token.important {
103 | 	font-weight: 700;
104 | }
105 | .token.italic {
106 | 	font-style: italic;
107 | }
108 | .token.entity {
109 | 	cursor: help;
110 | }
111 | /*# sourceMappingURL=prism-okaidia.min.css.map */
112 | 
113 | /* other custom styles not included in the default theme above */
114 | 
115 | /* .code-block {
116 |     Add styles for the code block here
117 |   }
118 | 
119 |   .scrollable-code-block {
120 |     Add a scrollbar to the code block
121 |     overflow-y: scroll;
122 |     Set a maximum height for the code block
123 |     max-height: 500px;
124 |   } */
125 | 


--------------------------------------------------------------------------------
/ui/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import Header from './Header.svelte';
 3 | 	import '../app.postcss'; //import tailwind css directives from app.css
 4 | </script>
 5 | 
 6 | <div class="app">
 7 | 	<Header />
 8 | 
 9 | 	<main>
10 | 		<slot />
11 | 	</main>
12 | 
13 | </div>
14 | 
15 | 
16 | 
17 | <style>
18 | 	.app {
19 | 		display: flex;
20 | 		flex-direction: column;
21 | 		min-height: 100vh;
22 | 	}
23 | 
24 | 	/* main {
25 | 		flex: 1;
26 | 		display: flex;
27 | 		flex-direction: column;
28 | 		padding: 1rem;
29 | 		width: 100%;
30 | 		max-width: 64rem;
31 | 		margin: 0 auto;
32 | 		box-sizing: border-box;
33 | 	} */
34 | /* 
35 | 	footer {
36 | 		display: flex;
37 | 		flex-direction: column;
38 | 		justify-content: center;
39 | 		align-items: center;
40 | 		padding: 12px;
41 | 	}
42 | 
43 | 	footer a {
44 | 		font-weight: bold;
45 | 	}
46 | 
47 | 	@media (min-width: 480px) {
48 | 		footer {
49 | 			padding: 12px 0;
50 | 		}
51 | 	} */
52 | </style>


--------------------------------------------------------------------------------
/ui/src/routes/+page.svelte:
--------------------------------------------------------------------------------
  1 | 
  2 | <svelte:head>
  3 | 	<title>Home</title>
  4 | 	<meta name="description" content="Foskaay Coding Ai" />
  5 | </svelte:head>
  6 | 
  7 | <!-- <svelte:head>
  8 |   <title>Foskaay AI: Ai coding support for programmers</title>
  9 | </svelte:head> -->
 10 | <script lang="ts">
 11 | 	import banner1 from '$lib/images/banner1.jpg';
 12 | 	import { v4 as uuidv4 } from 'uuid';
 13 | 	import Prism from 'svelte-prism';
 14 | 	import '$lib/styles/prism-okaidia.css'; //svelte-prism css
 15 | 	import { onMount } from 'svelte';
 16 | // import '$lib/styles/chat.css';
 17 | //   import { library} from '@fortawesome/fontawesome-svg-core';
 18 | //   import { faEdit, faCheck, faTimes, faTrashCan } from '@fortawesome/free-solid-svg-icons';
 19 | //   import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
 20 |   
 21 |   
 22 |   uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
 23 | //   library.add(faEdit, faCheck, faTimes); // Add the icons you want to use
 24 |  
 25 |   
 26 |   let messageUser = ''; //user's query, question and prompts
 27 |   let messageAi = ''; //foskaay AI response to user's query, question and prompts  
 28 |   let messages = []; //Add both User and Foskaay Ai chatBot response to display to user
 29 |   let chatId; // Auto generate unique ID with UUID per chat instance like ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
 30 |   let chatInstances = []; // array of chat instances added by clicking on "Create New Chat" button
 31 |   let newTitle = '';
 32 |   // Get the reference to the message display container
 33 |   let messageDisplayContainer;
 34 | 
 35 |   
 36 |   // Check if the window object exists to avoid errors in server-side rendering
 37 |   // This will ensure that the code that accesses the window object only 
 38 |   // runs in the client-side environment where the window object is defined, and it will avoid the error in the server-side environment.
 39 |   if (typeof window !== 'undefined') {
 40 |     try {
 41 |       chatId = window.location.hash.substring(1);
 42 |     } catch (error) {
 43 |       // Handle the error
 44 |       console.error(error);
 45 |     }
 46 |   }
 47 |   
 48 |   if (!chatId) {
 49 |   // Generate a new chat ID
 50 |   chatId = uuidv4();
 51 | 
 52 |   if (typeof window !== 'undefined') {
 53 |     // Update the URL with the new chat ID
 54 |     window.history.replaceState(null, null, `#${chatId}`);
 55 |   }
 56 | }
 57 | 
 58 | 
 59 | 
 60 |   // Load the messages from local storage when the component is mounted
 61 | onMount(() => {
 62 |   try {
 63 |     const storedChatInstances = window.localStorage.getItem('chat-instances');
 64 |     if (storedChatInstances) {
 65 |       chatInstances = JSON.parse(storedChatInstances);
 66 |       // selectedChatInstance = chatInstances.find(instance => instance.id === chatId);
 67 |     }
 68 |   } catch (error) {
 69 |     // Handle the error
 70 |     console.error(error);
 71 |   }
 72 | 
 73 | 
 74 |       // Set up an observer to observe the message display container for any changes
 75 |       const observer = new MutationObserver(() => {
 76 |       // Scroll the message display container to the bottom to show the latest messages
 77 |       messageDisplayContainer.scrollTop = messageDisplayContainer.scrollHeight;
 78 |     });
 79 | 
 80 |     // Start observing the message display container for changes
 81 |     observer.observe(messageDisplayContainer, { childList: true, subtree: true });
 82 | 
 83 | });
 84 | 
 85 |   
 86 | 
 87 | 
 88 | 
 89 | 
 90 | 
 91 | async function onSubmit(event) {
 92 |     event.preventDefault();
 93 |   
 94 |     // Add the user's message to the messages array
 95 |     messages = [...messages, { text: messageUser, type: 'user' }];
 96 |   
 97 |     // Save the messages to local storage
 98 |     try {
 99 |       window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
100 |     } catch (error) {
101 |       // Handle the error
102 |       console.error(error);
103 |     }
104 |   
105 |     // Send a POST request to the generate endpoint with the message as the request body
106 |     const response = await fetch('http://localhost:5000', {
107 |       method: 'POST',
108 |       headers: {
109 |         'Content-Type': 'application/json',
110 |       }, 
111 |       body: JSON.stringify({ prompt: messageUser }),
112 |     });
113 |      
114 |     if (response.ok) {
115 | 
116 |       // Get the response from the API as JSON
117 |         let Response = await response.json();
118 |         let rawAiResponse = Response.ai; //assign AI response data content to variable
119 | 
120 |       //pass the api response to highlightCode function to highlight its code
121 |         messageAi = highlightCode(rawAiResponse);
122 |         // let highlightedAiResponse = highlightCode(rawAiResponse);
123 | 
124 |         // Add the AI's message to the messages array
125 |         messages = [...messages, { text: messageAi, type: 'ai' }];
126 |   
127 |       // Save the messages to local storage
128 |       try {
129 |         window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
130 |       } catch (error) {
131 |         // Handle the error
132 |         console.error(error);
133 |       }
134 |     } else {
135 |       alert('An error occurred while submitting the form.');
136 |     }
137 |   
138 |     // Clear the message input
139 |     messageUser = '';
140 | }
141 |   
142 | 
143 | 
144 | 
145 | 
146 | // use regular expressions to identify if there is code in the AI's response and then only apply the syntax highlighting to that specific code
147 | function highlightCode(ai: string) {
148 |     const regex = /```(.*?)\n(.*?)\n```/gs;
149 |     let match;
150 |     while ((match = regex.exec(ai)) !== null) {
151 |         const language = match[1];
152 |         const code = match[2];
153 |         ai = ai.replace(match[0], `<Prism language="${language}">${code}</Prism>`);
154 |     }
155 |     console.log("Highlight Function ReturnAi", ai)
156 |     return ai;
157 |     
158 | }
159 | 
160 | 
161 | 
162 | 
163 |   // Function to create a new chat instance with unique id url and save old one in local storage
164 | async function onCreateNewChat() {
165 |   // Save the current chat instance in the local storage
166 |   try {
167 |     window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
168 |   } catch (error) {
169 |     // Handle the error
170 |     console.error(error);
171 |   }
172 | 
173 |   // Generate a new chat ID
174 |   chatId = uuidv4();
175 | 
176 |   // Update the URL with the new chat ID
177 |   window.history.replaceState(null, null, `#${chatId}`);
178 | 
179 |   // Retrieve the list of chat instances from the local storage
180 |   try {
181 |     const storedChatInstances = window.localStorage.getItem('chat-instances');
182 |     if (storedChatInstances) {
183 |       chatInstances = JSON.parse(storedChatInstances);
184 |     }
185 |   } catch (error) {
186 |     // Handle the error
187 |     console.error(error);
188 |   }
189 | 
190 |   // Add the new chat instance to the beginning of the chatInstances array
191 |   chatInstances = [{ id: chatId, title: `Chat ${chatInstances.length + 1}` }, ...chatInstances];
192 | 
193 |   // Save the updated list of chat instances in the local storage
194 |   try {
195 |     window.localStorage.setItem('chat-instances', JSON.stringify(chatInstances));
196 |   } catch (error) {
197 |     // Handle the error
198 |     console.error(error);
199 |   }
200 | 
201 |   // Reset the messages array
202 |   messages = [];
203 | }
204 | 
205 | 
206 | 
207 | // Function to select a chat instance
208 | async function onSelectChatInstance(event) {
209 |   // Get the chat ID from the URL
210 |   chatId = event.target.getAttribute('href').substring(1);
211 | 
212 |   // Load the messages for the selected chat instance from local storage
213 |   try {
214 |     const storedMessages = window.localStorage.getItem(`chat-${chatId}-messages`);
215 |     if (storedMessages) {
216 |       messages = JSON.parse(storedMessages);
217 |     }
218 |   } catch (error) {
219 |     // Handle the error
220 |     console.error(error);
221 |   }
222 | }
223 | 
224 | 
225 |  
226 | </script>
227 | 
228 | 
229 | 
230 | <!-- left-column left sidebar -->
231 | <div class="left-column">
232 |   <img src={banner1} alt="Banner ad" id="banner">
233 | </div>
234 | 
235 | <!-- center-coloumn for chats conversation -->
236 | <div class="center-column">
237 |   <div class="chat">
238 |     {#if messages.length === 0}
239 |       <div class="prompts-container">
240 |         <div class="prompts-section">
241 |           <h2>Prompts</h2>
242 |           <p class="prompt" data-text="What is your favorite color?">What is your favorite color?</p>
243 |           <p class="prompt" data-text="What is your favorite animal?">What is your favorite animal?</p>
244 |           <p class="prompt" data-text="What is your favorite food?">What is your favorite food?</p>
245 |         </div>
246 |         <div class="features-section">
247 |           <h2>Features</h2>
248 |           <ul>
249 |             <li>Realistic conversations</li>
250 |             <li>Quick responses</li>
251 |             <li>Unlimited chat instances</li>
252 |           </ul>
253 |         </div>
254 |       </div>
255 |     {/if}
256 | 
257 | <p>Foskaay Coding AI:</p>
258 | 
259 | <!-- Set the reference to the message display container -->
260 | <div class="message-display" bind:this={messageDisplayContainer}>
261 |   <!-- This is the template code for displaying the messages -->
262 |   {#each messages as message}
263 |       {#if message.type === 'user'}
264 |       <p class="user-message">
265 |         <!-- {message.text} -->
266 |         <Prism language="javascript">{message.text}</Prism>
267 |       </p>
268 |     {:else}
269 |       <p class="ai-message">
270 |         <Prism language="javascript">{message.text}</Prism>
271 |       </p>
272 |     {/if}
273 |   {/each}
274 | </div>
275 | 
276 | 
277 |   
278 |   </div>
279 |     
280 |   {#if chatInstances.length > 0}
281 |     <form on:submit|preventDefault={onSubmit}>
282 |       <!-- <input type="text" bind:value={messageUser} placeholder="Type your question here..." /> -->
283 |       <textarea
284 |       class="input-box"
285 |         bind:value={messageUser}
286 |         on:input={() => {
287 |           const el = event.target;
288 |           el.style.height = "auto";
289 |           el.style.height = el.scrollHeight + "px";
290 |       }}
291 |       style="border: 1px solid black;"
292 |     ></textarea>    
293 |       <button type="submit">Ask Foskaay</button>
294 |     </form>
295 |   {/if}
296 | </div>
297 | 
298 | 
299 | 
300 | 
301 | <!-- right-colum right sidebar -->
302 | <div class="right-column">
303 |   <button id="new-chat" on:click={onCreateNewChat}>Create New Chat</button>
304 |   <div id="chat-instance-list">
305 |     {#each chatInstances as chatInstance}
306 |       <div class="chat-instance">
307 |         {#if chatInstance.isEditing}
308 |           <input type="text" bind:value={newTitle} on:input={e => newTitle = e.target.value}>
309 |           <br>
310 |           <button>
311 |             Save
312 |           </button>
313 |           <button>
314 |             Cancel
315 |           </button>
316 |         {:else}
317 |           <a href={`#${chatInstance.id}`} on:click={onSelectChatInstance}>{chatInstance.title}</a>
318 |           <button>
319 |             Edit
320 |           </button>
321 |           <button>
322 |             Del
323 |           </button>
324 |         {/if}
325 |       </div>
326 |       <br>
327 |     {/each}
328 |   </div> 
329 | </div>
330 | 
331 | 
332 | 
333 | 
334 | 
335 | 
336 | 
337 | 
338 | <style>
339 |   /* Add a border to the chat container */
340 |   .chat {
341 |     border: 1px solid #ccc;
342 |     background-color: #f5f5f5;
343 |     margin: 0 20px;
344 |     height: 800px;
345 |     overflow: auto;    
346 |   }
347 |   
348 |   
349 |   
350 |   /* Add a hover effect to the prompts */
351 |   .prompt:hover {
352 |     color: red;
353 |   }
354 |   
355 |   /* Add styles for the left, center and right columns */
356 |   .left-column {
357 |     width: 15%;
358 |     float: left;
359 |   }
360 |   
361 |   .center-column {
362 |     width: 65%;
363 |     float: left;
364 |   }
365 |   
366 |   /* Add styles for the right column */
367 | .right-column {
368 | width: 20%;
369 | float: left;
370 | }
371 | 
372 | 
373 |   /* Add styles for the banner ad and chat container */
374 |   #banner {
375 |     width: 100%;
376 |   }
377 |   
378 | 
379 |   
380 |   /* Add styles for the prompts container and prompts */
381 |   .prompts-container {
382 |     text-align: center;
383 |   }
384 |   
385 |   .prompts-section {
386 |     margin: 20px;
387 |   }
388 |   
389 |   .prompt {
390 |     cursor: pointer;
391 |     display: inline-block;
392 |     margin: 10px;
393 |     padding: 10px 20px;
394 |     background-color: #eee;
395 |     border-radius: 4px;
396 |   }
397 |   
398 |   /* Add styles for the form and input */
399 |   form {
400 |     display: flex;
401 |     margin: 20px;
402 |   }
403 |   
404 |   input {
405 |     flex: 1;
406 |     padding: 10px;
407 |     border: 1px solid #ccc;
408 |     border-radius: 4px;
409 |   }
410 |   
411 |   button {
412 |     margin-left: 10px;
413 |     padding: 10px 20px;
414 |     border: 1px solid #ccc;
415 |     border-radius: 4px;
416 |   }
417 |   
418 | 
419 |   .features-section {
420 |     margin: 20px;
421 |   }
422 | 
423 |   .features-section ul {
424 |     list-style: none;
425 |     padding: 0;
426 |   }
427 | 
428 |   /* Add scrolling to chatinstances title labels */
429 |   #chat-instance-list {
430 |   height: 700px;
431 |   overflow-y: scroll;
432 | }
433 | 
434 | 
435 | 
436 | /* format message for better readability */
437 | /* Format messages with paragraphs */
438 | .message-display {
439 |   /* max-height: 300px; */
440 |   overflow-y: auto;
441 |   padding: 10px;
442 |   border: 1px solid #ddd;
443 |   border-radius: 5px;
444 | }
445 | 
446 | .user-message {
447 |   margin: 10px 0;
448 |   padding: 5px;
449 |   background-color: #eee;
450 |   border-radius: 5px;
451 | }
452 | 
453 | .ai-message {
454 |   margin: 10px 0;
455 |   padding: 5px;
456 |   background-color: #f3f3f3;
457 |   border-radius: 5px;
458 | }  
459 | 
460 | 
461 | /* Text area style to initally look like input box */
462 | .input-box {
463 |   border: none;
464 |   resize: none;
465 |   font-size: 1rem;
466 |   padding: 0.5rem;
467 |   width: 100%;
468 |   height: 2rem;
469 |   line-height: 1.5;
470 | }
471 | 
472 | textarea {
473 |   max-height: 200px;
474 |   overflow-y: auto;
475 | }
476 | 
477 | 
478 | </style>


--------------------------------------------------------------------------------
/ui/src/routes/Header.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	import { page } from '$app/stores';
  3 | 	// import logo from '$lib/images/svelte-logo.svg';
  4 | 	// import githublogo from '$lib/images/github.svg';
  5 | </script>
  6 | 
  7 | <header>
  8 | 	<div class="corner">
  9 | 		<!-- <a href="/">
 10 | 			<img src={logo} alt="Foskaay Ai Logo" />
 11 | 		</a> -->
 12 | 	</div>
 13 | 
 14 | 	<nav>
 15 | 		<svg viewBox="0 0 2 3" aria-hidden="true">
 16 | 			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
 17 | 		</svg>
 18 | 		<ul>
 19 | 			<li aria-current={$page.url.pathname === 'https://AiHiPUniversity.com/' ? 'page' : undefined}>
 20 | 				<a href="https://AiHiPUniversity.com">Home</a> 
 21 | 			</li>
 22 | 			<li aria-current={$page.url.pathname === 'https://AiHiPUniversity.com/about' ? 'page' : undefined}>
 23 | 				<a href="https://AiHiPUniversity.com/about">| About</a>
 24 | 			</li>
 25 | 			<li aria-current={$page.url.pathname.startsWith('https://AiHiPUniversity.com/contact') ? 'page' : undefined}>
 26 | 				<a href="https://AiHiPUniversity.com/contact">| Contact</a>
 27 | 			</li>
 28 | 			<li aria-current={$page.url.pathname === 'https://aihipuniversity.com/?tags-0.00.-Courses-Category=All-Courses' ? 'page' : undefined}>
 29 | 				<a href="https://aihipuniversity.com/?tags-0.00.-Courses-Category=All-Courses">| Courses</a>
 30 | 			</li>
 31 | 			<li aria-current={$page.url.pathname.startsWith('/') ? 'page' : undefined}>
 32 | 				<a href="/">| Foskaay AI Dev Support</a>
 33 | 			</li>
 34 | 			<!-- <li aria-current={$page.url.pathname === 'https://aihipuniversity.com/?tags=Blog' ? 'page' : undefined}>
 35 | 				<a href="https://aihipuniversity.com/?tags=Blog">| Blog</a>
 36 | 			</li> -->
 37 | 		</ul>
 38 | 		<svg viewBox="0 0 2 3" aria-hidden="true">
 39 | 			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
 40 | 		</svg>
 41 | 	</nav>
 42 | 
 43 | 	<div class="corner">
 44 |         <ul>
 45 |             <li>
 46 |                 <!-- corner icon 1 -->
 47 |             </li>          
 48 |             <li>
 49 |                 <!-- corner icon 1 -->
 50 |             </li>    
 51 |         </ul>
 52 | 	</div>
 53 | </header>
 54 | 
 55 | <style>
 56 | 	header {
 57 | 		display: flex;
 58 | 		justify-content: space-between;
 59 | 	}
 60 | 
 61 | 	.corner {
 62 | 		width: 3em;
 63 | 		height: 3em;
 64 | 	}
 65 | 
 66 | 	/* .corner a {
 67 | 		display: flex;
 68 | 		align-items: center;
 69 | 		justify-content: center;
 70 | 		width: 100%;
 71 | 		height: 100%;
 72 | 	}
 73 | 
 74 | 	.corner img {
 75 | 		width: 2em;
 76 | 		height: 2em;
 77 | 		object-fit: contain;
 78 | 	} */
 79 | 
 80 | 	nav {
 81 | 		display: flex;
 82 | 		justify-content: center;
 83 | 		--background: rgba(255, 255, 255, 0.7);
 84 | 	}
 85 | 
 86 | 	svg {
 87 | 		width: 2em;
 88 | 		height: 3em;
 89 | 		display: block;
 90 | 	}
 91 | 
 92 | 	path {
 93 | 		fill: var(--background);
 94 | 	}
 95 | 
 96 | 	ul {
 97 | 		position: relative;
 98 | 		padding: 0;
 99 | 		margin: 0;
100 | 		height: 3em;
101 | 		display: flex;
102 | 		justify-content: center;
103 | 		align-items: center;
104 | 		list-style: none;
105 | 		background: var(--background);
106 | 		background-size: contain;
107 | 	}
108 | 
109 | 	li {
110 | 		position: relative;
111 | 		height: 100%;
112 | 	}
113 | 
114 | 	li[aria-current='page']::before {
115 | 		--size: 6px;
116 | 		content: '';
117 | 		width: 0;
118 | 		height: 0;
119 | 		position: absolute;
120 | 		top: 0;
121 | 		left: calc(50% - var(--size));
122 | 		border: var(--size) solid transparent;
123 | 		border-top: var(--size) solid var(--color-theme-1);
124 | 	}
125 | 
126 | 	nav a {
127 | 		display: flex;
128 | 		height: 100%;
129 | 		align-items: center;
130 | 		padding: 0 0.5rem;
131 | 		color: var(--color-text);
132 | 		font-weight: 700;
133 | 		font-size: 0.8rem;
134 | 		text-transform: uppercase;
135 | 		letter-spacing: 0.1em;
136 | 		text-decoration: none;
137 | 		transition: color 0.2s linear;
138 | 	}
139 | 
140 | 	a:hover {
141 | 		color: var(--color-theme-1);
142 | 	}
143 | </style>
144 | 
145 | 
146 | 


--------------------------------------------------------------------------------
/ui/src/routes/pageCopy1.svelte:
--------------------------------------------------------------------------------
  1 | 
  2 | <svelte:head>
  3 | 	<title>Home</title>
  4 | 	<meta name="description" content="Foskaay Coding Ai" />
  5 | </svelte:head>
  6 | 
  7 | <!-- <svelte:head>
  8 |   <title>Foskaay AI: Ai coding support for programmers</title>
  9 | </svelte:head> -->
 10 | <script lang="ts">
 11 | 	import banner1 from '$lib/images/banner1.jpg';
 12 | 	import { v4 as uuidv4 } from 'uuid';
 13 | 	import Prism from 'svelte-prism';
 14 | 	import '$lib/styles/prism-okaidia.css'; //svelte-prism css
 15 | 	import { onMount } from 'svelte';
 16 | // import '$lib/styles/chat.css';
 17 | //   import { library} from '@fortawesome/fontawesome-svg-core';
 18 | //   import { faEdit, faCheck, faTimes, faTrashCan } from '@fortawesome/free-solid-svg-icons';
 19 | //   import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
 20 |   
 21 |   
 22 |   uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
 23 | //   library.add(faEdit, faCheck, faTimes); // Add the icons you want to use
 24 |  
 25 |   
 26 |   let message = ''; //user quesry, question and prompts
 27 |   let messages = []; //Add both User and Foskaay Ai chatBot response to display to user
 28 |   let chatId; // Auto generate unique ID with UUID per chat instance like ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
 29 |   let chatInstances = []; // array of chat instances added by clicking on "Create New Chat" button
 30 |   let newTitle = '';
 31 | 
 32 | 
 33 |   
 34 |   // Check if the window object exists to avoid errors in server-side rendering
 35 |   // This will ensure that the code that accesses the window object only 
 36 |   // runs in the client-side environment where the window object is defined, and it will avoid the error in the server-side environment.
 37 |   if (typeof window !== 'undefined') {
 38 |     try {
 39 |       chatId = window.location.hash.substring(1);
 40 |     } catch (error) {
 41 |       // Handle the error
 42 |       console.error(error);
 43 |     }
 44 |   }
 45 |   
 46 |   if (!chatId) {
 47 |   // Generate a new chat ID
 48 |   chatId = uuidv4();
 49 | 
 50 |   if (typeof window !== 'undefined') {
 51 |     // Update the URL with the new chat ID
 52 |     window.history.replaceState(null, null, `#${chatId}`);
 53 |   }
 54 | }
 55 | 
 56 | 
 57 | 
 58 |   // Load the messages from local storage when the component is mounted
 59 | onMount(() => {
 60 |   try {
 61 |     const storedChatInstances = window.localStorage.getItem('chat-instances');
 62 |     if (storedChatInstances) {
 63 |       chatInstances = JSON.parse(storedChatInstances);
 64 |       // selectedChatInstance = chatInstances.find(instance => instance.id === chatId);
 65 |     }
 66 |   } catch (error) {
 67 |     // Handle the error
 68 |     console.error(error);
 69 |   }
 70 | });
 71 | 
 72 |   
 73 | 
 74 | 
 75 | 
 76 | 
 77 | 
 78 | 
 79 | 
 80 | async function onSubmit(event) {
 81 |     event.preventDefault();
 82 |   
 83 |     // Add the user's message to the messages array
 84 |     messages = [...messages, { text: message, type: 'user' }];
 85 |   
 86 |     // Save the messages to local storage
 87 |     try {
 88 |       window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
 89 |     } catch (error) {
 90 |       // Handle the error
 91 |       console.error(error);
 92 |     }
 93 |   
 94 |     // Send a POST request to the generate endpoint with the message as the request body
 95 |     const response = await fetch('http://localhost:5000', {
 96 |       method: 'POST',
 97 |       headers: {
 98 |         'Content-Type': 'application/json',
 99 |       }, 
100 |       body: JSON.stringify({ prompt: message }),
101 |     });
102 |      
103 |     if (response.ok) {
104 | 
105 |       // Get the response from the API as JSON
106 |         let aiResponse = await response.json();
107 |       //pass the api response to highlightCode function to highlight its code
108 |         let ai = highlightCode(aiResponse.ai)
109 | 
110 |         // Add the AI's message to the messages array
111 |         messages = [...messages, { text: ai, type: 'ai' }];
112 |           
113 |   
114 |       // Save the messages to local storage
115 |       try {
116 |         window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
117 |       } catch (error) {
118 |         // Handle the error
119 |         console.error(error);
120 |       }
121 |     } else {
122 |       alert('An error occurred while submitting the form.');
123 |     }
124 |   
125 |     // Clear the message input
126 |     message = '';
127 | }
128 |   
129 | 
130 | 
131 | // use regular expressions to identify if there is code in the AI's response and then only apply the syntax highlighting to that specific code
132 | function highlightCode(ai: string) {
133 |     const regex = /```(.*?)\n(.*?)\n```/gs;
134 |     let match;
135 |     while ((match = regex.exec(ai)) !== null) {
136 |         const language = match[1];
137 |         const code = match[2];
138 |         ai = ai.replace(match[0], `<Prism language="${language}">${code}</Prism>`);
139 |     }
140 |     console.log("ReturnAi", ai)
141 |     return ai;
142 |     
143 | }
144 | 
145 | 
146 |   // Function to create a new chat instance with unique id url and save old one in local storage
147 | async function onCreateNewChat() {
148 |   // Save the current chat instance in the local storage
149 |   try {
150 |     window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
151 |   } catch (error) {
152 |     // Handle the error
153 |     console.error(error);
154 |   }
155 | 
156 |   // Generate a new chat ID
157 |   chatId = uuidv4();
158 | 
159 |   // Update the URL with the new chat ID
160 |   window.history.replaceState(null, null, `#${chatId}`);
161 | 
162 |   // Retrieve the list of chat instances from the local storage
163 |   try {
164 |     const storedChatInstances = window.localStorage.getItem('chat-instances');
165 |     if (storedChatInstances) {
166 |       chatInstances = JSON.parse(storedChatInstances);
167 |     }
168 |   } catch (error) {
169 |     // Handle the error
170 |     console.error(error);
171 |   }
172 | 
173 |   // Add the new chat instance to the beginning of the chatInstances array
174 |   chatInstances = [{ id: chatId, title: `Chat ${chatInstances.length + 1}` }, ...chatInstances];
175 | 
176 |   // Save the updated list of chat instances in the local storage
177 |   try {
178 |     window.localStorage.setItem('chat-instances', JSON.stringify(chatInstances));
179 |   } catch (error) {
180 |     // Handle the error
181 |     console.error(error);
182 |   }
183 | 
184 |   // Reset the messages array
185 |   messages = [];
186 | }
187 | 
188 | 
189 | 
190 | // Function to select a chat instance
191 | async function onSelectChatInstance(event) {
192 |   // Get the chat ID from the URL
193 |   chatId = event.target.getAttribute('href').substring(1);
194 | 
195 |   // Load the messages for the selected chat instance from local storage
196 |   try {
197 |     const storedMessages = window.localStorage.getItem(`chat-${chatId}-messages`);
198 |     if (storedMessages) {
199 |       messages = JSON.parse(storedMessages);
200 |     }
201 |   } catch (error) {
202 |     // Handle the error
203 |     console.error(error);
204 |   }
205 | }
206 | 
207 | 
208 | 
209 | </script>
210 | 
211 | 
212 | 
213 | <!-- left-column left sidebar -->
214 | <div class="left-column">
215 |   <img src={banner1} alt="Banner ad" id="banner">
216 | </div>
217 | 
218 | <!-- center-coloumn for chats conversation -->
219 | <div class="center-column">
220 |   <div class="chat">
221 |     {#if messages.length === 0}
222 |       <div class="prompts-container">
223 |         <div class="prompts-section">
224 |           <h2>Prompts</h2>
225 |           <p class="prompt" data-text="What is your favorite color?">What is your favorite color?</p>
226 |           <p class="prompt" data-text="What is your favorite animal?">What is your favorite animal?</p>
227 |           <p class="prompt" data-text="What is your favorite food?">What is your favorite food?</p>
228 |         </div>
229 |         <div class="features-section">
230 |           <h2>Features</h2>
231 |           <ul>
232 |             <li>Realistic conversations</li>
233 |             <li>Quick responses</li>
234 |             <li>Unlimited chat instances</li>
235 |           </ul>
236 |         </div>
237 |       </div>
238 |     {/if}
239 | 
240 |     {#each messages as message}
241 |     {#if message.type === 'user'}
242 |         <div class="message user">{message.text}</div>
243 |     {:else}
244 |     <!-- display ai response without highlighting with svelte-prism -->
245 |     <!-- <div class="message user">{message.text}</div> -->
246 | 
247 |     <!-- display ai response with highlighting with svelte-prism -->
248 |         <div class="message bot">
249 |             <Prism language={message.language}>{message.text}</Prism>
250 |         </div>
251 |     {/if}
252 | {/each}
253 | 
254 | 
255 |   </div>
256 |   
257 |   {#if chatInstances.length > 0}
258 |     <form on:submit|preventDefault={onSubmit}>
259 |       <input type="text" bind:value={message} placeholder="Type your message here..." />
260 |       <button type="submit">Ask Foskaay</button>
261 |     </form>
262 |   {/if}
263 | </div>
264 | 
265 | 
266 | 
267 | 
268 | <!-- right-colum right sidebar -->
269 | <div class="right-column">
270 |   <button id="new-chat" on:click={onCreateNewChat}>Create New Chat</button>
271 |   <div id="chat-instance-list">
272 |     {#each chatInstances as chatInstance}
273 |       <div class="chat-instance">
274 |         {#if chatInstance.isEditing}
275 |           <input type="text" bind:value={newTitle} on:input={e => newTitle = e.target.value}>
276 |           <br>
277 |           <button>
278 |             Save
279 |           </button>
280 |           <button>
281 |             Cancel
282 |           </button>
283 |         {:else}
284 |           <a href={`#${chatInstance.id}`} on:click={onSelectChatInstance}>{chatInstance.title}</a>
285 |           <button>
286 |             Edit
287 |           </button>
288 |           <button>
289 |             Del
290 |           </button>
291 |         {/if}
292 |       </div>
293 |       <br>
294 |     {/each}
295 |   </div> 
296 | </div>
297 | 
298 | 
299 | 
300 | 
301 | 
302 | 
303 | 
304 | 
305 | <style>
306 |   /* Add a border to the chat container */
307 |   .chat {
308 |     border: 1px solid #ccc;
309 |     background-color: #f5f5f5;
310 |     margin: 0 20px;
311 |     height: 800px;
312 |     overflow: auto;    
313 |   }
314 |   
315 |   
316 |   /* Adjust the font size and font family of the messages */
317 |   .message {
318 |     font-size: 14px;
319 |     font-family: Arial, sans-serif;
320 |   }
321 |   
322 |   /* Add a hover effect to the prompts */
323 |   .prompt:hover {
324 |     color: red;
325 |   }
326 |   
327 |   /* Add styles for the left, center and right columns */
328 |   .left-column {
329 |     width: 15%;
330 |     float: left;
331 |   }
332 |   
333 |   .center-column {
334 |     width: 65%;
335 |     float: left;
336 |   }
337 |   
338 |   /* Add styles for the right column */
339 | .right-column {
340 | width: 20%;
341 | float: left;
342 | }
343 | 
344 | 
345 |   /* Add styles for the banner ad and chat container */
346 |   #banner {
347 |     width: 100%;
348 |   }
349 |   
350 | 
351 |   
352 |   /* Add styles for the prompts container and prompts */
353 |   .prompts-container {
354 |     text-align: center;
355 |   }
356 |   
357 |   .prompts-section {
358 |     margin: 20px;
359 |   }
360 |   
361 |   .prompt {
362 |     cursor: pointer;
363 |     display: inline-block;
364 |     margin: 10px;
365 |     padding: 10px 20px;
366 |     background-color: #eee;
367 |     border-radius: 4px;
368 |   }
369 |   
370 |   /* Add styles for the form and input */
371 |   form {
372 |     display: flex;
373 |     margin: 20px;
374 |   }
375 |   
376 |   input {
377 |     flex: 1;
378 |     padding: 10px;
379 |     border: 1px solid #ccc;
380 |     border-radius: 4px;
381 |   }
382 |   
383 |   button {
384 |     margin-left: 10px;
385 |     padding: 10px 20px;
386 |     border: 1px solid #ccc;
387 |     border-radius: 4px;
388 |   }
389 |   
390 |   .message {
391 |     margin: 10px;
392 |     padding: 10px;
393 |     background-color: #fff;
394 |     border-radius: 4px;
395 |   }
396 | 
397 |   .user {
398 |     background-color: #eee;
399 |   }
400 | 
401 |   .bot {
402 |     background-color: #ddd;
403 |   }
404 | 
405 |   .features-section {
406 |     margin: 20px;
407 |   }
408 | 
409 |   .features-section ul {
410 |     list-style: none;
411 |     padding: 0;
412 |   }
413 | 
414 |   /* Add scrolling to chatinstances title labels */
415 |   #chat-instance-list {
416 |   height: 700px;
417 |   overflow-y: scroll;
418 | }
419 | 
420 | /* prevent the Save and Delete buttons from covering the input field 
421 | by positioning the buttons below the input field */
422 | /* .right-column #chat-instance-list input + button {
423 |   position: absolute;
424 |   bottom: 0;
425 | } */
426 | 
427 | /* edit icon style */
428 | /* .edit-icon {
429 |     cursor: pointer;
430 |   } */ 
431 | 
432 | 
433 | </style>


--------------------------------------------------------------------------------
/ui/src/routes/pageCopy2.svelte:
--------------------------------------------------------------------------------
  1 | 
  2 | <svelte:head>
  3 | 	<title>Home</title>
  4 | 	<meta name="description" content="Foskaay Coding Ai" />
  5 | </svelte:head>
  6 | 
  7 | <!-- <svelte:head>
  8 |   <title>Foskaay AI: Ai coding support for programmers</title>
  9 | </svelte:head> -->
 10 | <script lang="ts">
 11 | 	import banner1 from '$lib/images/banner1.jpg';
 12 | 	import { v4 as uuidv4 } from 'uuid';
 13 | 	import Prism from 'svelte-prism';
 14 | 	import '$lib/styles/prism-okaidia.css'; //svelte-prism css
 15 | 	import { onMount } from 'svelte';
 16 | // import '$lib/styles/chat.css';
 17 | //   import { library} from '@fortawesome/fontawesome-svg-core';
 18 | //   import { faEdit, faCheck, faTimes, faTrashCan } from '@fortawesome/free-solid-svg-icons';
 19 | //   import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
 20 |   
 21 |   
 22 |   uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
 23 | //   library.add(faEdit, faCheck, faTimes); // Add the icons you want to use
 24 |  
 25 |   
 26 |   let message = ''; //user query, question and prompts
 27 |   let messages = []; //Add both User and Foskaay Ai chatBot response to display to user
 28 |   let chatId; // Auto generate unique ID with UUID per chat instance like ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
 29 |   let chatInstances = []; // array of chat instances added by clicking on "Create New Chat" button
 30 |   let newTitle = '';
 31 | 
 32 | 
 33 |   
 34 |   // Check if the window object exists to avoid errors in server-side rendering
 35 |   // This will ensure that the code that accesses the window object only 
 36 |   // runs in the client-side environment where the window object is defined, and it will avoid the error in the server-side environment.
 37 |   if (typeof window !== 'undefined') {
 38 |     try {
 39 |       chatId = window.location.hash.substring(1);
 40 |     } catch (error) {
 41 |       // Handle the error
 42 |       console.error(error);
 43 |     }
 44 |   }
 45 |   
 46 |   if (!chatId) {
 47 |   // Generate a new chat ID
 48 |   chatId = uuidv4();
 49 | 
 50 |   if (typeof window !== 'undefined') {
 51 |     // Update the URL with the new chat ID
 52 |     window.history.replaceState(null, null, `#${chatId}`);
 53 |   }
 54 | }
 55 | 
 56 | 
 57 | 
 58 |   // Load the messages from local storage when the component is mounted
 59 | onMount(() => {
 60 |   try {
 61 |     const storedChatInstances = window.localStorage.getItem('chat-instances');
 62 |     if (storedChatInstances) {
 63 |       chatInstances = JSON.parse(storedChatInstances);
 64 |       // selectedChatInstance = chatInstances.find(instance => instance.id === chatId);
 65 |     }
 66 |   } catch (error) {
 67 |     // Handle the error
 68 |     console.error(error);
 69 |   }
 70 | });
 71 | 
 72 |   
 73 | 
 74 | 
 75 | 
 76 | 
 77 | 
 78 | async function onSubmit(event) {
 79 |     event.preventDefault();
 80 |   
 81 |     // Add the user's message to the messages array
 82 |     messages = [...messages, { text: message, type: 'user' }];
 83 |   
 84 |     // Save the messages to local storage
 85 |     try {
 86 |       window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
 87 |     } catch (error) {
 88 |       // Handle the error
 89 |       console.error(error);
 90 |     }
 91 |   
 92 |     // Send a POST request to the generate endpoint with the message as the request body
 93 |     const response = await fetch('http://localhost:5000', {
 94 |       method: 'POST',
 95 |       headers: {
 96 |         'Content-Type': 'application/json',
 97 |       }, 
 98 |       body: JSON.stringify({ prompt: message }),
 99 |     });
100 |      
101 |     if (response.ok) {
102 | 
103 |       // Get the response from the API as JSON
104 |         let aiResponse = await response.json();
105 |       //pass the api response to highlightCode function to highlight its code
106 |         let ai = highlightCode(aiResponse.ai)
107 | 
108 |         // Add the AI's message to the messages array
109 |         messages = [...messages, { text: ai, type: 'ai' }];
110 |           
111 |   
112 |       // Save the messages to local storage
113 |       try {
114 |         window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
115 |       } catch (error) {
116 |         // Handle the error
117 |         console.error(error);
118 |       }
119 |     } else {
120 |       alert('An error occurred while submitting the form.');
121 |     }
122 |   
123 |     // Clear the message input
124 |     message = '';
125 | }
126 |   
127 | 
128 | 
129 | 
130 | 
131 | // use regular expressions to identify if there is code in the AI's response and then only apply the syntax highlighting to that specific code
132 | function highlightCode(ai: string) {
133 |     const regex = /```(.*?)\n(.*?)\n```/gs;
134 |     let match;
135 |     while ((match = regex.exec(ai)) !== null) {
136 |         const language = match[1];
137 |         const code = match[2];
138 |         ai = ai.replace(match[0], `<Prism language="${language}">${code}</Prism>`);
139 |     }
140 |     console.log("ReturnAi", ai)
141 |     return ai;
142 |     
143 | }
144 | 
145 | 
146 |   // Function to create a new chat instance with unique id url and save old one in local storage
147 | async function onCreateNewChat() {
148 |   // Save the current chat instance in the local storage
149 |   try {
150 |     window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
151 |   } catch (error) {
152 |     // Handle the error
153 |     console.error(error);
154 |   }
155 | 
156 |   // Generate a new chat ID
157 |   chatId = uuidv4();
158 | 
159 |   // Update the URL with the new chat ID
160 |   window.history.replaceState(null, null, `#${chatId}`);
161 | 
162 |   // Retrieve the list of chat instances from the local storage
163 |   try {
164 |     const storedChatInstances = window.localStorage.getItem('chat-instances');
165 |     if (storedChatInstances) {
166 |       chatInstances = JSON.parse(storedChatInstances);
167 |     }
168 |   } catch (error) {
169 |     // Handle the error
170 |     console.error(error);
171 |   }
172 | 
173 |   // Add the new chat instance to the beginning of the chatInstances array
174 |   chatInstances = [{ id: chatId, title: `Chat ${chatInstances.length + 1}` }, ...chatInstances];
175 | 
176 |   // Save the updated list of chat instances in the local storage
177 |   try {
178 |     window.localStorage.setItem('chat-instances', JSON.stringify(chatInstances));
179 |   } catch (error) {
180 |     // Handle the error
181 |     console.error(error);
182 |   }
183 | 
184 |   // Reset the messages array
185 |   messages = [];
186 | }
187 | 
188 | 
189 | 
190 | // Function to select a chat instance
191 | async function onSelectChatInstance(event) {
192 |   // Get the chat ID from the URL
193 |   chatId = event.target.getAttribute('href').substring(1);
194 | 
195 |   // Load the messages for the selected chat instance from local storage
196 |   try {
197 |     const storedMessages = window.localStorage.getItem(`chat-${chatId}-messages`);
198 |     if (storedMessages) {
199 |       messages = JSON.parse(storedMessages);
200 |     }
201 |   } catch (error) {
202 |     // Handle the error
203 |     console.error(error);
204 |   }
205 | }
206 | 
207 | 
208 | 
209 | </script>
210 | 
211 | 
212 | 
213 | <!-- left-column left sidebar -->
214 | <div class="left-column">
215 |   <img src={banner1} alt="Banner ad" id="banner">
216 | </div>
217 | 
218 | <!-- center-coloumn for chats conversation -->
219 | <div class="center-column">
220 |   <div class="chat">
221 |     {#if messages.length === 0}
222 |       <div class="prompts-container">
223 |         <div class="prompts-section">
224 |           <h2>Prompts</h2>
225 |           <p class="prompt" data-text="What is your favorite color?">What is your favorite color?</p>
226 |           <p class="prompt" data-text="What is your favorite animal?">What is your favorite animal?</p>
227 |           <p class="prompt" data-text="What is your favorite food?">What is your favorite food?</p>
228 |         </div>
229 |         <div class="features-section">
230 |           <h2>Features</h2>
231 |           <ul>
232 |             <li>Realistic conversations</li>
233 |             <li>Quick responses</li>
234 |             <li>Unlimited chat instances</li>
235 |           </ul>
236 |         </div>
237 |       </div>
238 |     {/if}
239 | 
240 |     {#each messages as message}
241 |       {#if message.type === 'user'}
242 |         <div class="message user">
243 |           {message.text}
244 |         </div>
245 |       {:else}
246 |         <!-- display ai response with highlighting with svelte-prism -->
247 |         <div class="message bot">
248 |           <Prism language={message.language}>{message.text}</Prism>
249 |         </div>
250 |       {/if}
251 |     {/each}
252 |   </div>
253 |     
254 |   {#if chatInstances.length > 0}
255 |     <form on:submit|preventDefault={onSubmit}>
256 |       <input type="text" bind:value={message} placeholder="Type your question here..." />
257 |       <button type="submit">Ask Foskaay</button>
258 |     </form>
259 |   {/if}
260 | </div>
261 | 
262 | 
263 | 
264 | 
265 | <!-- right-colum right sidebar -->
266 | <div class="right-column">
267 |   <button id="new-chat" on:click={onCreateNewChat}>Create New Chat</button>
268 |   <div id="chat-instance-list">
269 |     {#each chatInstances as chatInstance}
270 |       <div class="chat-instance">
271 |         {#if chatInstance.isEditing}
272 |           <input type="text" bind:value={newTitle} on:input={e => newTitle = e.target.value}>
273 |           <br>
274 |           <button>
275 |             Save
276 |           </button>
277 |           <button>
278 |             Cancel
279 |           </button>
280 |         {:else}
281 |           <a href={`#${chatInstance.id}`} on:click={onSelectChatInstance}>{chatInstance.title}</a>
282 |           <button>
283 |             Edit
284 |           </button>
285 |           <button>
286 |             Del
287 |           </button>
288 |         {/if}
289 |       </div>
290 |       <br>
291 |     {/each}
292 |   </div> 
293 | </div>
294 | 
295 | 
296 | 
297 | 
298 | 
299 | 
300 | 
301 | 
302 | <style>
303 |   /* Add a border to the chat container */
304 |   .chat {
305 |     border: 1px solid #ccc;
306 |     background-color: #f5f5f5;
307 |     margin: 0 20px;
308 |     height: 800px;
309 |     overflow: auto;    
310 |   }
311 |   
312 |   
313 |   /* Adjust the font size and font family of the messages */
314 |   .message {
315 |     font-size: 14px;
316 |     font-family: Arial, sans-serif;
317 |   }
318 |   
319 |   /* Add a hover effect to the prompts */
320 |   .prompt:hover {
321 |     color: red;
322 |   }
323 |   
324 |   /* Add styles for the left, center and right columns */
325 |   .left-column {
326 |     width: 15%;
327 |     float: left;
328 |   }
329 |   
330 |   .center-column {
331 |     width: 65%;
332 |     float: left;
333 |   }
334 |   
335 |   /* Add styles for the right column */
336 | .right-column {
337 | width: 20%;
338 | float: left;
339 | }
340 | 
341 | 
342 |   /* Add styles for the banner ad and chat container */
343 |   #banner {
344 |     width: 100%;
345 |   }
346 |   
347 | 
348 |   
349 |   /* Add styles for the prompts container and prompts */
350 |   .prompts-container {
351 |     text-align: center;
352 |   }
353 |   
354 |   .prompts-section {
355 |     margin: 20px;
356 |   }
357 |   
358 |   .prompt {
359 |     cursor: pointer;
360 |     display: inline-block;
361 |     margin: 10px;
362 |     padding: 10px 20px;
363 |     background-color: #eee;
364 |     border-radius: 4px;
365 |   }
366 |   
367 |   /* Add styles for the form and input */
368 |   form {
369 |     display: flex;
370 |     margin: 20px;
371 |   }
372 |   
373 |   input {
374 |     flex: 1;
375 |     padding: 10px;
376 |     border: 1px solid #ccc;
377 |     border-radius: 4px;
378 |   }
379 |   
380 |   button {
381 |     margin-left: 10px;
382 |     padding: 10px 20px;
383 |     border: 1px solid #ccc;
384 |     border-radius: 4px;
385 |   }
386 |   
387 |   .message {
388 |     margin: 10px;
389 |     padding: 10px;
390 |     background-color: #fff;
391 |     border-radius: 4px;
392 |   }
393 | 
394 |   .user {
395 |     background-color: #eee;
396 |   }
397 | 
398 |   .bot {
399 |     background-color: #ddd;
400 |   }
401 | 
402 |   .features-section {
403 |     margin: 20px;
404 |   }
405 | 
406 |   .features-section ul {
407 |     list-style: none;
408 |     padding: 0;
409 |   }
410 | 
411 |   /* Add scrolling to chatinstances title labels */
412 |   #chat-instance-list {
413 |   height: 700px;
414 |   overflow-y: scroll;
415 | }
416 | 
417 | /* prevent the Save and Delete buttons from covering the input field 
418 | by positioning the buttons below the input field */
419 | /* .right-column #chat-instance-list input + button {
420 |   position: absolute;
421 |   bottom: 0;
422 | } */
423 | 
424 | /* edit icon style */
425 | /* .edit-icon {
426 |     cursor: pointer;
427 |   } */ 
428 | 
429 | 
430 | </style>


--------------------------------------------------------------------------------
/ui/src/routes/pageCopy3.svelte:
--------------------------------------------------------------------------------
  1 | 
  2 | <svelte:head>
  3 | 	<title>Home</title>
  4 | 	<meta name="description" content="Foskaay Coding Ai" />
  5 | </svelte:head>
  6 | 
  7 | <!-- <svelte:head>
  8 |   <title>Foskaay AI: Ai coding support for programmers</title>
  9 | </svelte:head> -->
 10 | <script lang="ts">
 11 | 	import banner1 from '$lib/images/banner1.jpg';
 12 | 	import { v4 as uuidv4 } from 'uuid';
 13 | 	import Prism from 'svelte-prism';
 14 | 	import '$lib/styles/prism-okaidia.css'; //svelte-prism css
 15 | 	import { onMount } from 'svelte';
 16 | // import '$lib/styles/chat.css';
 17 | //   import { library} from '@fortawesome/fontawesome-svg-core';
 18 | //   import { faEdit, faCheck, faTimes, faTrashCan } from '@fortawesome/free-solid-svg-icons';
 19 | //   import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
 20 |   
 21 |   
 22 |   uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
 23 | //   library.add(faEdit, faCheck, faTimes); // Add the icons you want to use
 24 |  
 25 |   
 26 |   let messageUser = ''; //user's query, question and prompts
 27 |   let messageAi = ''; //foskaay AI response to user's query, question and prompts  
 28 |   let messages = []; //Add both User and Foskaay Ai chatBot response to display to user
 29 |   let chatId; // Auto generate unique ID with UUID per chat instance like ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
 30 |   let chatInstances = []; // array of chat instances added by clicking on "Create New Chat" button
 31 |   let newTitle = '';
 32 |   // Get the reference to the message display container
 33 |   let messageDisplayContainer;
 34 | 
 35 |   
 36 |   // Check if the window object exists to avoid errors in server-side rendering
 37 |   // This will ensure that the code that accesses the window object only 
 38 |   // runs in the client-side environment where the window object is defined, and it will avoid the error in the server-side environment.
 39 |   if (typeof window !== 'undefined') {
 40 |     try {
 41 |       chatId = window.location.hash.substring(1);
 42 |     } catch (error) {
 43 |       // Handle the error
 44 |       console.error(error);
 45 |     }
 46 |   }
 47 |   
 48 |   if (!chatId) {
 49 |   // Generate a new chat ID
 50 |   chatId = uuidv4();
 51 | 
 52 |   if (typeof window !== 'undefined') {
 53 |     // Update the URL with the new chat ID
 54 |     window.history.replaceState(null, null, `#${chatId}`);
 55 |   }
 56 | }
 57 | 
 58 | 
 59 | 
 60 |   // Load the messages from local storage when the component is mounted
 61 | onMount(() => {
 62 |   try {
 63 |     const storedChatInstances = window.localStorage.getItem('chat-instances');
 64 |     if (storedChatInstances) {
 65 |       chatInstances = JSON.parse(storedChatInstances);
 66 |       // selectedChatInstance = chatInstances.find(instance => instance.id === chatId);
 67 |     }
 68 |   } catch (error) {
 69 |     // Handle the error
 70 |     console.error(error);
 71 |   }
 72 | 
 73 | 
 74 |       // Set up an observer to observe the message display container for any changes
 75 |       const observer = new MutationObserver(() => {
 76 |       // Scroll the message display container to the bottom to show the latest messages
 77 |       messageDisplayContainer.scrollTop = messageDisplayContainer.scrollHeight;
 78 |     });
 79 | 
 80 |     // Start observing the message display container for changes
 81 |     observer.observe(messageDisplayContainer, { childList: true, subtree: true });
 82 | 
 83 | });
 84 | 
 85 |   
 86 | 
 87 | 
 88 | 
 89 | 
 90 | 
 91 | async function onSubmit(event) {
 92 |     event.preventDefault();
 93 |   
 94 |     // Add the user's message to the messages array
 95 |     messages = [...messages, { text: messageUser, type: 'user' }];
 96 |   
 97 |     // Save the messages to local storage
 98 |     try {
 99 |       window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
100 |     } catch (error) {
101 |       // Handle the error
102 |       console.error(error);
103 |     }
104 |   
105 |     // Send a POST request to the generate endpoint with the message as the request body
106 |     const response = await fetch('http://localhost:5000', {
107 |       method: 'POST',
108 |       headers: {
109 |         'Content-Type': 'application/json',
110 |       }, 
111 |       body: JSON.stringify({ prompt: messageUser }),
112 |     });
113 |      
114 |     if (response.ok) {
115 | 
116 |       // Get the response from the API as JSON
117 |         let Response = await response.json();
118 |         let rawAiResponse = Response.ai; //assign AI response data content to variable
119 | 
120 |       //pass the api response to highlightCode function to highlight its code
121 |         messageAi = highlightCode(rawAiResponse);
122 |         // let highlightedAiResponse = highlightCode(rawAiResponse);
123 | 
124 |         // Add the AI's message to the messages array
125 |         messages = [...messages, { text: messageAi, type: 'ai' }];
126 |   
127 |       // Save the messages to local storage
128 |       try {
129 |         window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
130 |       } catch (error) {
131 |         // Handle the error
132 |         console.error(error);
133 |       }
134 |     } else {
135 |       alert('An error occurred while submitting the form.');
136 |     }
137 |   
138 |     // Clear the message input
139 |     messageUser = '';
140 | }
141 |   
142 | 
143 | 
144 | 
145 | 
146 | // use regular expressions to identify if there is code in the AI's response and then only apply the syntax highlighting to that specific code
147 | function highlightCode(ai: string) {
148 |     const regex = /```(.*?)\n(.*?)\n```/gs;
149 |     let match;
150 |     while ((match = regex.exec(ai)) !== null) {
151 |         const language = match[1];
152 |         const code = match[2];
153 |         ai = ai.replace(match[0], `<Prism language="${language}">${code}</Prism>`);
154 |     }
155 |     console.log("Highlight Function ReturnAi", ai)
156 |     return ai;
157 |     
158 | }
159 | 
160 | 
161 | 
162 | 
163 |   // Function to create a new chat instance with unique id url and save old one in local storage
164 | async function onCreateNewChat() {
165 |   // Save the current chat instance in the local storage
166 |   try {
167 |     window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
168 |   } catch (error) {
169 |     // Handle the error
170 |     console.error(error);
171 |   }
172 | 
173 |   // Generate a new chat ID
174 |   chatId = uuidv4();
175 | 
176 |   // Update the URL with the new chat ID
177 |   window.history.replaceState(null, null, `#${chatId}`);
178 | 
179 |   // Retrieve the list of chat instances from the local storage
180 |   try {
181 |     const storedChatInstances = window.localStorage.getItem('chat-instances');
182 |     if (storedChatInstances) {
183 |       chatInstances = JSON.parse(storedChatInstances);
184 |     }
185 |   } catch (error) {
186 |     // Handle the error
187 |     console.error(error);
188 |   }
189 | 
190 |   // Add the new chat instance to the beginning of the chatInstances array
191 |   chatInstances = [{ id: chatId, title: `Chat ${chatInstances.length + 1}` }, ...chatInstances];
192 | 
193 |   // Save the updated list of chat instances in the local storage
194 |   try {
195 |     window.localStorage.setItem('chat-instances', JSON.stringify(chatInstances));
196 |   } catch (error) {
197 |     // Handle the error
198 |     console.error(error);
199 |   }
200 | 
201 |   // Reset the messages array
202 |   messages = [];
203 | }
204 | 
205 | 
206 | 
207 | // Function to select a chat instance
208 | async function onSelectChatInstance(event) {
209 |   // Get the chat ID from the URL
210 |   chatId = event.target.getAttribute('href').substring(1);
211 | 
212 |   // Load the messages for the selected chat instance from local storage
213 |   try {
214 |     const storedMessages = window.localStorage.getItem(`chat-${chatId}-messages`);
215 |     if (storedMessages) {
216 |       messages = JSON.parse(storedMessages);
217 |     }
218 |   } catch (error) {
219 |     // Handle the error
220 |     console.error(error);
221 |   }
222 | }
223 | 
224 | 
225 |  
226 | </script>
227 | 
228 | 
229 | 
230 | <!-- left-column left sidebar -->
231 | <div class="left-column">
232 |   <img src={banner1} alt="Banner ad" id="banner">
233 | </div>
234 | 
235 | <!-- center-coloumn for chats conversation -->
236 | <div class="center-column">
237 |   <div class="chat">
238 |     {#if messages.length === 0}
239 |       <div class="prompts-container">
240 |         <div class="prompts-section">
241 |           <h2>Prompts</h2>
242 |           <p class="prompt" data-text="What is your favorite color?">What is your favorite color?</p>
243 |           <p class="prompt" data-text="What is your favorite animal?">What is your favorite animal?</p>
244 |           <p class="prompt" data-text="What is your favorite food?">What is your favorite food?</p>
245 |         </div>
246 |         <div class="features-section">
247 |           <h2>Features</h2>
248 |           <ul>
249 |             <li>Realistic conversations</li>
250 |             <li>Quick responses</li>
251 |             <li>Unlimited chat instances</li>
252 |           </ul>
253 |         </div>
254 |       </div>
255 |     {/if}
256 | 
257 | <p>NEW DISPLAY BELOW:</p>
258 | 
259 | <!-- Set the reference to the message display container -->
260 | <div class="message-display-container" bind:this={messageDisplayContainer}>
261 |   <!-- This is the template code for displaying the messages -->
262 |   {#each messages as message}
263 |     <div class="message {message.type}">
264 |       <!-- <Prism language={message.language}>{message.text}</Prism> -->
265 |       <p>{message.text}</p>
266 |       <!-- <p>{@html message.text}</p> -->
267 |       <!-- <Prism language={message.language}>{message.text}</Prism> -->
268 |     </div>
269 |   {/each}
270 | </div>
271 | 
272 | 
273 |   
274 |   </div>
275 |     
276 |   {#if chatInstances.length > 0}
277 |     <form on:submit|preventDefault={onSubmit}>
278 |       <input type="text" bind:value={messageUser} placeholder="Type your question here..." />
279 |       <button type="submit">Ask Foskaay</button>
280 |     </form>
281 |   {/if}
282 | </div>
283 | 
284 | 
285 | 
286 | 
287 | <!-- right-colum right sidebar -->
288 | <div class="right-column">
289 |   <button id="new-chat" on:click={onCreateNewChat}>Create New Chat</button>
290 |   <div id="chat-instance-list">
291 |     {#each chatInstances as chatInstance}
292 |       <div class="chat-instance">
293 |         {#if chatInstance.isEditing}
294 |           <input type="text" bind:value={newTitle} on:input={e => newTitle = e.target.value}>
295 |           <br>
296 |           <button>
297 |             Save
298 |           </button>
299 |           <button>
300 |             Cancel
301 |           </button>
302 |         {:else}
303 |           <a href={`#${chatInstance.id}`} on:click={onSelectChatInstance}>{chatInstance.title}</a>
304 |           <button>
305 |             Edit
306 |           </button>
307 |           <button>
308 |             Del
309 |           </button>
310 |         {/if}
311 |       </div>
312 |       <br>
313 |     {/each}
314 |   </div> 
315 | </div>
316 | 
317 | 
318 | 
319 | 
320 | 
321 | 
322 | 
323 | 
324 | <style>
325 |   /* Add a border to the chat container */
326 |   .chat {
327 |     border: 1px solid #ccc;
328 |     background-color: #f5f5f5;
329 |     margin: 0 20px;
330 |     height: 800px;
331 |     overflow: auto;    
332 |   }
333 |   
334 |   
335 |   /* Adjust the font size and font family of the messages */
336 |   .message {
337 |     font-size: 14px;
338 |     font-family: Arial, sans-serif;
339 |   }
340 |   
341 |   /* Add a hover effect to the prompts */
342 |   .prompt:hover {
343 |     color: red;
344 |   }
345 |   
346 |   /* Add styles for the left, center and right columns */
347 |   .left-column {
348 |     width: 15%;
349 |     float: left;
350 |   }
351 |   
352 |   .center-column {
353 |     width: 65%;
354 |     float: left;
355 |   }
356 |   
357 |   /* Add styles for the right column */
358 | .right-column {
359 | width: 20%;
360 | float: left;
361 | }
362 | 
363 | 
364 |   /* Add styles for the banner ad and chat container */
365 |   #banner {
366 |     width: 100%;
367 |   }
368 |   
369 | 
370 |   
371 |   /* Add styles for the prompts container and prompts */
372 |   .prompts-container {
373 |     text-align: center;
374 |   }
375 |   
376 |   .prompts-section {
377 |     margin: 20px;
378 |   }
379 |   
380 |   .prompt {
381 |     cursor: pointer;
382 |     display: inline-block;
383 |     margin: 10px;
384 |     padding: 10px 20px;
385 |     background-color: #eee;
386 |     border-radius: 4px;
387 |   }
388 |   
389 |   /* Add styles for the form and input */
390 |   form {
391 |     display: flex;
392 |     margin: 20px;
393 |   }
394 |   
395 |   input {
396 |     flex: 1;
397 |     padding: 10px;
398 |     border: 1px solid #ccc;
399 |     border-radius: 4px;
400 |   }
401 |   
402 |   button {
403 |     margin-left: 10px;
404 |     padding: 10px 20px;
405 |     border: 1px solid #ccc;
406 |     border-radius: 4px;
407 |   }
408 |   
409 |   .message {
410 |     margin: 10px;
411 |     padding: 10px;
412 |     background-color: #fff;
413 |     border-radius: 4px;
414 |   }
415 | 
416 |   .user {
417 |     background-color: #eee;
418 |   }
419 | 
420 |   .bot {
421 |     background-color: #ddd;
422 |   }
423 | 
424 |   .features-section {
425 |     margin: 20px;
426 |   }
427 | 
428 |   .features-section ul {
429 |     list-style: none;
430 |     padding: 0;
431 |   }
432 | 
433 |   /* Add scrolling to chatinstances title labels */
434 |   #chat-instance-list {
435 |   height: 700px;
436 |   overflow-y: scroll;
437 | }
438 | 
439 | /* prevent the Save and Delete buttons from covering the input field 
440 | by positioning the buttons below the input field */
441 | /* .right-column #chat-instance-list input + button {
442 |   position: absolute;
443 |   bottom: 0;
444 | } */
445 | 
446 | /* edit icon style */
447 | /* .edit-icon {
448 |     cursor: pointer;
449 |   } */ 
450 | 
451 |   
452 | /* observer and scroll message styling */
453 | .message {
454 |     display: flex;
455 |     margin-bottom: 10px;
456 |     padding: 10px;
457 |     border-radius: 10px;
458 |     /* max-width: 90%; */
459 |     word-wrap: break-word;
460 |   }
461 | 
462 |   .user {
463 |     align-self: flex-end;
464 |     background-color: #d2f1e0;
465 |   }
466 | 
467 |   .ai {
468 |     align-self: flex-start;
469 |     background-color: #eaeaea;
470 |   }
471 | 
472 |   .message p {
473 |     margin: 0;
474 |   }
475 | 
476 |   /* This is the CSS code for the message display container */
477 |   .message-display-container {
478 |     height: 700px;
479 |     overflow-y: auto;
480 |   }
481 | </style>


--------------------------------------------------------------------------------
/ui/src/routes/pageCopy4.svelte:
--------------------------------------------------------------------------------
  1 | 
  2 | <svelte:head>
  3 | 	<title>Home</title>
  4 | 	<meta name="description" content="Foskaay Coding Ai" />
  5 | </svelte:head>
  6 | 
  7 | <!-- <svelte:head>
  8 |   <title>Foskaay AI: Ai coding support for programmers</title>
  9 | </svelte:head> -->
 10 | <script lang="ts">
 11 | 	import banner1 from '$lib/images/banner1.jpg';
 12 | 	import { v4 as uuidv4 } from 'uuid';
 13 | 	import Prism from 'svelte-prism';
 14 | 	import '$lib/styles/prism-okaidia.css'; //svelte-prism css
 15 | 	import { onMount } from 'svelte';
 16 | // import '$lib/styles/chat.css';
 17 | //   import { library} from '@fortawesome/fontawesome-svg-core';
 18 | //   import { faEdit, faCheck, faTimes, faTrashCan } from '@fortawesome/free-solid-svg-icons';
 19 | //   import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
 20 |   
 21 |   
 22 |   uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
 23 | //   library.add(faEdit, faCheck, faTimes); // Add the icons you want to use
 24 |  
 25 |   
 26 |   let messageUser = ''; //user's query, question and prompts
 27 |   let messageAi = ''; //foskaay AI response to user's query, question and prompts  
 28 |   let messages = []; //Add both User and Foskaay Ai chatBot response to display to user
 29 |   let chatId; // Auto generate unique ID with UUID per chat instance like ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
 30 |   let chatInstances = []; // array of chat instances added by clicking on "Create New Chat" button
 31 |   let newTitle = '';
 32 |   // Get the reference to the message display container
 33 |   let messageDisplayContainer;
 34 | 
 35 |   
 36 |   // Check if the window object exists to avoid errors in server-side rendering
 37 |   // This will ensure that the code that accesses the window object only 
 38 |   // runs in the client-side environment where the window object is defined, and it will avoid the error in the server-side environment.
 39 |   if (typeof window !== 'undefined') {
 40 |     try {
 41 |       chatId = window.location.hash.substring(1);
 42 |     } catch (error) {
 43 |       // Handle the error
 44 |       console.error(error);
 45 |     }
 46 |   }
 47 |   
 48 |   if (!chatId) {
 49 |   // Generate a new chat ID
 50 |   chatId = uuidv4();
 51 | 
 52 |   if (typeof window !== 'undefined') {
 53 |     // Update the URL with the new chat ID
 54 |     window.history.replaceState(null, null, `#${chatId}`);
 55 |   }
 56 | }
 57 | 
 58 | 
 59 | 
 60 |   // Load the messages from local storage when the component is mounted
 61 | onMount(() => {
 62 |   try {
 63 |     const storedChatInstances = window.localStorage.getItem('chat-instances');
 64 |     if (storedChatInstances) {
 65 |       chatInstances = JSON.parse(storedChatInstances);
 66 |       // selectedChatInstance = chatInstances.find(instance => instance.id === chatId);
 67 |     }
 68 |   } catch (error) {
 69 |     // Handle the error
 70 |     console.error(error);
 71 |   }
 72 | 
 73 | 
 74 |       // Set up an observer to observe the message display container for any changes
 75 |       const observer = new MutationObserver(() => {
 76 |       // Scroll the message display container to the bottom to show the latest messages
 77 |       messageDisplayContainer.scrollTop = messageDisplayContainer.scrollHeight;
 78 |     });
 79 | 
 80 |     // Start observing the message display container for changes
 81 |     observer.observe(messageDisplayContainer, { childList: true, subtree: true });
 82 | 
 83 | });
 84 | 
 85 |   
 86 | 
 87 | 
 88 | 
 89 | 
 90 | 
 91 | async function onSubmit(event) {
 92 |     event.preventDefault();
 93 |   
 94 |     // Add the user's message to the messages array
 95 |     messages = [...messages, { text: messageUser, type: 'user' }];
 96 |   
 97 |     // Save the messages to local storage
 98 |     try {
 99 |       window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
100 |     } catch (error) {
101 |       // Handle the error
102 |       console.error(error);
103 |     }
104 |   
105 |     // Send a POST request to the generate endpoint with the message as the request body
106 |     const response = await fetch('http://localhost:5000', {
107 |       method: 'POST',
108 |       headers: {
109 |         'Content-Type': 'application/json',
110 |       }, 
111 |       body: JSON.stringify({ prompt: messageUser }),
112 |     });
113 |      
114 |     if (response.ok) {
115 | 
116 |       // Get the response from the API as JSON
117 |         let Response = await response.json();
118 |         let rawAiResponse = Response.ai; //assign AI response data content to variable
119 | 
120 |       //pass the api response to highlightCode function to highlight its code
121 |         messageAi = highlightCode(rawAiResponse);
122 |         // let highlightedAiResponse = highlightCode(rawAiResponse);
123 | 
124 |         // Add the AI's message to the messages array
125 |         messages = [...messages, { text: messageAi, type: 'ai' }];
126 |   
127 |       // Save the messages to local storage
128 |       try {
129 |         window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
130 |       } catch (error) {
131 |         // Handle the error
132 |         console.error(error);
133 |       }
134 |     } else {
135 |       alert('An error occurred while submitting the form.');
136 |     }
137 |   
138 |     // Clear the message input
139 |     messageUser = '';
140 | }
141 |   
142 | 
143 | 
144 | 
145 | 
146 | // use regular expressions to identify if there is code in the AI's response and then only apply the syntax highlighting to that specific code
147 | function highlightCode(ai: string) {
148 |     const regex = /```(.*?)\n(.*?)\n```/gs;
149 |     let match;
150 |     while ((match = regex.exec(ai)) !== null) {
151 |         const language = match[1];
152 |         const code = match[2];
153 |         ai = ai.replace(match[0], `<Prism language="${language}">${code}</Prism>`);
154 |     }
155 |     console.log("Highlight Function ReturnAi", ai)
156 |     return ai;
157 |     
158 | }
159 | 
160 | 
161 | 
162 | 
163 |   // Function to create a new chat instance with unique id url and save old one in local storage
164 | async function onCreateNewChat() {
165 |   // Save the current chat instance in the local storage
166 |   try {
167 |     window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
168 |   } catch (error) {
169 |     // Handle the error
170 |     console.error(error);
171 |   }
172 | 
173 |   // Generate a new chat ID
174 |   chatId = uuidv4();
175 | 
176 |   // Update the URL with the new chat ID
177 |   window.history.replaceState(null, null, `#${chatId}`);
178 | 
179 |   // Retrieve the list of chat instances from the local storage
180 |   try {
181 |     const storedChatInstances = window.localStorage.getItem('chat-instances');
182 |     if (storedChatInstances) {
183 |       chatInstances = JSON.parse(storedChatInstances);
184 |     }
185 |   } catch (error) {
186 |     // Handle the error
187 |     console.error(error);
188 |   }
189 | 
190 |   // Add the new chat instance to the beginning of the chatInstances array
191 |   chatInstances = [{ id: chatId, title: `Chat ${chatInstances.length + 1}` }, ...chatInstances];
192 | 
193 |   // Save the updated list of chat instances in the local storage
194 |   try {
195 |     window.localStorage.setItem('chat-instances', JSON.stringify(chatInstances));
196 |   } catch (error) {
197 |     // Handle the error
198 |     console.error(error);
199 |   }
200 | 
201 |   // Reset the messages array
202 |   messages = [];
203 | }
204 | 
205 | 
206 | 
207 | // Function to select a chat instance
208 | async function onSelectChatInstance(event) {
209 |   // Get the chat ID from the URL
210 |   chatId = event.target.getAttribute('href').substring(1);
211 | 
212 |   // Load the messages for the selected chat instance from local storage
213 |   try {
214 |     const storedMessages = window.localStorage.getItem(`chat-${chatId}-messages`);
215 |     if (storedMessages) {
216 |       messages = JSON.parse(storedMessages);
217 |     }
218 |   } catch (error) {
219 |     // Handle the error
220 |     console.error(error);
221 |   }
222 | }
223 | 
224 | 
225 |  
226 | </script>
227 | 
228 | 
229 | 
230 | <!-- left-column left sidebar -->
231 | <div class="left-column">
232 |   <img src={banner1} alt="Banner ad" id="banner">
233 | </div>
234 | 
235 | <!-- center-coloumn for chats conversation -->
236 | <div class="center-column">
237 |   <div class="chat">
238 |     {#if messages.length === 0}
239 |       <div class="prompts-container">
240 |         <div class="prompts-section">
241 |           <h2>Prompts</h2>
242 |           <p class="prompt" data-text="What is your favorite color?">What is your favorite color?</p>
243 |           <p class="prompt" data-text="What is your favorite animal?">What is your favorite animal?</p>
244 |           <p class="prompt" data-text="What is your favorite food?">What is your favorite food?</p>
245 |         </div>
246 |         <div class="features-section">
247 |           <h2>Features</h2>
248 |           <ul>
249 |             <li>Realistic conversations</li>
250 |             <li>Quick responses</li>
251 |             <li>Unlimited chat instances</li>
252 |           </ul>
253 |         </div>
254 |       </div>
255 |     {/if}
256 | 
257 | <p>NEW DISPLAY BELOW:</p>
258 | <!-- Set the reference to the message display container -->
259 | 
260 | <!-- <script>
261 |   export let messages = [];
262 | </script> -->
263 | 
264 | <div class="message-display" bind:this={messageDisplayContainer}>
265 |   {#each messages as message}
266 |     <div class="chat-message {message.type}">
267 |       <Prism language="javascript">{message.text}</Prism>
268 |     </div>
269 |   {/each}
270 | </div>
271 | 
272 | 
273 |   
274 |   </div>
275 |     
276 |   {#if chatInstances.length > 0}
277 |     <form on:submit|preventDefault={onSubmit}>
278 |       <input type="text" bind:value={messageUser} placeholder="Type your question here..." />
279 |       <button type="submit">Ask Foskaay</button>
280 |     </form>
281 |   {/if}
282 | </div>
283 | 
284 | 
285 | 
286 | 
287 | <!-- right-colum right sidebar -->
288 | <div class="right-column">
289 |   <button id="new-chat" on:click={onCreateNewChat}>Create New Chat</button>
290 |   <div id="chat-instance-list">
291 |     {#each chatInstances as chatInstance}
292 |       <div class="chat-instance">
293 |         {#if chatInstance.isEditing}
294 |           <input type="text" bind:value={newTitle} on:input={e => newTitle = e.target.value}>
295 |           <br>
296 |           <button>
297 |             Save
298 |           </button>
299 |           <button>
300 |             Cancel
301 |           </button>
302 |         {:else}
303 |           <a href={`#${chatInstance.id}`} on:click={onSelectChatInstance}>{chatInstance.title}</a>
304 |           <button>
305 |             Edit
306 |           </button>
307 |           <button>
308 |             Del
309 |           </button>
310 |         {/if}
311 |       </div>
312 |       <br>
313 |     {/each}
314 |   </div> 
315 | </div>
316 | 
317 | 
318 | 
319 | 
320 | 
321 | 
322 | 
323 | 
324 | <style>
325 |   /* Add a border to the chat container */
326 |   .chat {
327 |     border: 1px solid #ccc;
328 |     background-color: #f5f5f5;
329 |     margin: 0 20px;
330 |     height: 800px;
331 |     overflow: auto;    
332 |   }
333 |   
334 |   
335 |   /* Adjust the font size and font family of the messages */
336 |   .message {
337 |     font-size: 14px;
338 |     font-family: Arial, sans-serif;
339 |   }
340 |   
341 |   /* Add a hover effect to the prompts */
342 |   .prompt:hover {
343 |     color: red;
344 |   }
345 |   
346 |   /* Add styles for the left, center and right columns */
347 |   .left-column {
348 |     width: 15%;
349 |     float: left;
350 |   }
351 |   
352 |   .center-column {
353 |     width: 65%;
354 |     float: left;
355 |   }
356 |   
357 |   /* Add styles for the right column */
358 | .right-column {
359 | width: 20%;
360 | float: left;
361 | }
362 | 
363 | 
364 |   /* Add styles for the banner ad and chat container */
365 |   #banner {
366 |     width: 100%;
367 |   }
368 |   
369 | 
370 |   
371 |   /* Add styles for the prompts container and prompts */
372 |   .prompts-container {
373 |     text-align: center;
374 |   }
375 |   
376 |   .prompts-section {
377 |     margin: 20px;
378 |   }
379 |   
380 |   .prompt {
381 |     cursor: pointer;
382 |     display: inline-block;
383 |     margin: 10px;
384 |     padding: 10px 20px;
385 |     background-color: #eee;
386 |     border-radius: 4px;
387 |   }
388 |   
389 |   /* Add styles for the form and input */
390 |   form {
391 |     display: flex;
392 |     margin: 20px;
393 |   }
394 |   
395 |   input {
396 |     flex: 1;
397 |     padding: 10px;
398 |     border: 1px solid #ccc;
399 |     border-radius: 4px;
400 |   }
401 |   
402 |   button {
403 |     margin-left: 10px;
404 |     padding: 10px 20px;
405 |     border: 1px solid #ccc;
406 |     border-radius: 4px;
407 |   }
408 |   
409 |   .message {
410 |     margin: 10px;
411 |     padding: 10px;
412 |     background-color: #fff;
413 |     border-radius: 4px;
414 |   }
415 | 
416 |   .user {
417 |     background-color: #eee;
418 |   }
419 | 
420 |   .bot {
421 |     background-color: #ddd;
422 |   }
423 | 
424 |   .features-section {
425 |     margin: 20px;
426 |   }
427 | 
428 |   .features-section ul {
429 |     list-style: none;
430 |     padding: 0;
431 |   }
432 | 
433 |   /* Add scrolling to chatinstances title labels */
434 |   #chat-instance-list {
435 |   height: 700px;
436 |   overflow-y: scroll;
437 | }
438 | 
439 | /* prevent the Save and Delete buttons from covering the input field 
440 | by positioning the buttons below the input field */
441 | /* .right-column #chat-instance-list input + button {
442 |   position: absolute;
443 |   bottom: 0;
444 | } */
445 | 
446 | /* edit icon style */
447 | /* .edit-icon {
448 |     cursor: pointer;
449 |   } */ 
450 | 
451 |   
452 | /* observer and scroll message styling */
453 | .message {
454 |     display: flex;
455 |     margin-bottom: 10px;
456 |     padding: 10px;
457 |     border-radius: 10px;
458 |     /* max-width: 90%; */
459 |     word-wrap: break-word;
460 |   }
461 | 
462 |   .user {
463 |     align-self: flex-end;
464 |     background-color: #d2f1e0;
465 |   }
466 | 
467 |   .ai {
468 |     align-self: flex-start;
469 |     background-color: #eaeaea;
470 |   }
471 | 
472 |   .message p {
473 |     margin: 0;
474 |   }
475 | 
476 |   /* This is the CSS code for the message display container */
477 |   .message-display-container {
478 |     height: 700px;
479 |     overflow-y: auto;
480 |   }
481 | 
482 | 
483 |   /* format message for better readability */
484 |   .chat-message {
485 |   margin: 1rem 0;
486 | }
487 | 
488 | .chat-message.user {
489 |   background-color: #f3f3f3;
490 |   padding: 0.5rem 1rem;
491 |   border-radius: 1rem 1rem 0 1rem;
492 | }
493 | 
494 | .chat-message.ai {
495 |   background-color: #5f9ea0;
496 |   color: #fff;
497 |   padding: 0.5rem 1rem;
498 |   border-radius: 1rem 1rem 1rem 0;
499 | }
500 | 
501 | 
502 | </style>


--------------------------------------------------------------------------------
/ui/src/routes/pageCopy5.svelte:
--------------------------------------------------------------------------------
  1 | 
  2 | <svelte:head>
  3 | 	<title>Home</title>
  4 | 	<meta name="description" content="Foskaay Coding Ai" />
  5 | </svelte:head>
  6 | 
  7 | <!-- <svelte:head>
  8 |   <title>Foskaay AI: Ai coding support for programmers</title>
  9 | </svelte:head> -->
 10 | <script lang="ts">
 11 | 	import banner1 from '$lib/images/banner1.jpg';
 12 | 	import { v4 as uuidv4 } from 'uuid';
 13 | 	import Prism from 'svelte-prism';
 14 | 	import '$lib/styles/prism-okaidia.css'; //svelte-prism css
 15 | 	import { onMount } from 'svelte';
 16 | // import '$lib/styles/chat.css';
 17 | //   import { library} from '@fortawesome/fontawesome-svg-core';
 18 | //   import { faEdit, faCheck, faTimes, faTrashCan } from '@fortawesome/free-solid-svg-icons';
 19 | //   import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
 20 |   
 21 |   
 22 |   uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
 23 | //   library.add(faEdit, faCheck, faTimes); // Add the icons you want to use
 24 |  
 25 |   
 26 |   let messageUser = ''; //user's query, question and prompts
 27 |   let messageAi = ''; //foskaay AI response to user's query, question and prompts  
 28 |   let messages = []; //Add both User and Foskaay Ai chatBot response to display to user
 29 |   let chatId; // Auto generate unique ID with UUID per chat instance like ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
 30 |   let chatInstances = []; // array of chat instances added by clicking on "Create New Chat" button
 31 |   let newTitle = '';
 32 |   // Get the reference to the message display container
 33 |   let messageDisplayContainer;
 34 | 
 35 |   
 36 |   // Check if the window object exists to avoid errors in server-side rendering
 37 |   // This will ensure that the code that accesses the window object only 
 38 |   // runs in the client-side environment where the window object is defined, and it will avoid the error in the server-side environment.
 39 |   if (typeof window !== 'undefined') {
 40 |     try {
 41 |       chatId = window.location.hash.substring(1);
 42 |     } catch (error) {
 43 |       // Handle the error
 44 |       console.error(error);
 45 |     }
 46 |   }
 47 |   
 48 |   if (!chatId) {
 49 |   // Generate a new chat ID
 50 |   chatId = uuidv4();
 51 | 
 52 |   if (typeof window !== 'undefined') {
 53 |     // Update the URL with the new chat ID
 54 |     window.history.replaceState(null, null, `#${chatId}`);
 55 |   }
 56 | }
 57 | 
 58 | 
 59 | 
 60 |   // Load the messages from local storage when the component is mounted
 61 | onMount(() => {
 62 |   try {
 63 |     const storedChatInstances = window.localStorage.getItem('chat-instances');
 64 |     if (storedChatInstances) {
 65 |       chatInstances = JSON.parse(storedChatInstances);
 66 |       // selectedChatInstance = chatInstances.find(instance => instance.id === chatId);
 67 |     }
 68 |   } catch (error) {
 69 |     // Handle the error
 70 |     console.error(error);
 71 |   }
 72 | 
 73 | 
 74 |       // Set up an observer to observe the message display container for any changes
 75 |       const observer = new MutationObserver(() => {
 76 |       // Scroll the message display container to the bottom to show the latest messages
 77 |       messageDisplayContainer.scrollTop = messageDisplayContainer.scrollHeight;
 78 |     });
 79 | 
 80 |     // Start observing the message display container for changes
 81 |     observer.observe(messageDisplayContainer, { childList: true, subtree: true });
 82 | 
 83 | });
 84 | 
 85 |   
 86 | 
 87 | 
 88 | 
 89 | 
 90 | 
 91 | async function onSubmit(event) {
 92 |     event.preventDefault();
 93 | 
 94 |  // Format the user's message
 95 |  const formattedUserMessage = messageUser.replace(/\n/g, '<br />');    
 96 |   
 97 |     // Add the user's message to the messages array
 98 |     messages = [...messages, { text: formattedUserMessage, type: 'user' }];
 99 |   
100 |     // Save the messages to local storage
101 |     try {
102 |       window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
103 |     } catch (error) {
104 |       // Handle the error
105 |       console.error(error);
106 |     }
107 |   
108 |     // Send a POST request to the generate endpoint with the message as the request body
109 |     const response = await fetch('http://localhost:5000', {
110 |       method: 'POST',
111 |       headers: {
112 |         'Content-Type': 'application/json',
113 |       }, 
114 |       body: JSON.stringify({ prompt: messageUser }),
115 |     });
116 |      
117 |     if (response.ok) {
118 | 
119 |       // Get the response from the API as JSON
120 |         let Response = await response.json();
121 |         let rawAiResponse = Response.ai; //assign AI response data content to variable
122 | 
123 |     // Format the AI's message
124 |     const formattedAiMessage = rawAiResponse.replace(/\n/g, '<br />');
125 | 
126 | 
127 |       //pass the api response to highlightCode function to highlight its code
128 |         messageAi = highlightCode(formattedAiMessage);
129 |         // let highlightedAiResponse = highlightCode(rawAiResponse);
130 | 
131 |         // Add the AI's message to the messages array
132 |         messages = [...messages, { text: messageAi, type: 'ai' }];
133 |   
134 |       // Save the messages to local storage
135 |       try {
136 |         window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
137 |       } catch (error) {
138 |         // Handle the error
139 |         console.error(error);
140 |       }
141 | 
142 |       // Clear the message input
143 |       messageUser = '';
144 | 
145 | 
146 |     } else {
147 |       alert('An error occurred while submitting the form.');
148 |     }
149 |   
150 |     // Clear the message input
151 |     // messageUser = '';
152 |     
153 | }
154 |   
155 | 
156 | 
157 | 
158 | 
159 | // use regular expressions to identify if there is code in the AI's response and then only apply the syntax highlighting to that specific code
160 | function highlightCode(ai: string) {
161 |     const regex = /```(.*?)\n(.*?)\n```/gs;
162 |     let match;
163 |     while ((match = regex.exec(ai)) !== null) {
164 |         const language = match[1];
165 |         const code = match[2];
166 |         ai = ai.replace(match[0], `<Prism language="${language}">${code}</Prism>`);
167 |     }
168 |     console.log("Highlight Function ReturnAi", ai)
169 |     return ai;
170 |     
171 | }
172 | 
173 | 
174 | 
175 | 
176 |   // Function to create a new chat instance with unique id url and save old one in local storage
177 | async function onCreateNewChat() {
178 |   // Save the current chat instance in the local storage
179 |   try {
180 |     window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
181 |   } catch (error) {
182 |     // Handle the error
183 |     console.error(error);
184 |   }
185 | 
186 |   // Generate a new chat ID
187 |   chatId = uuidv4();
188 | 
189 |   // Update the URL with the new chat ID
190 |   window.history.replaceState(null, null, `#${chatId}`);
191 | 
192 |   // Retrieve the list of chat instances from the local storage
193 |   try {
194 |     const storedChatInstances = window.localStorage.getItem('chat-instances');
195 |     if (storedChatInstances) {
196 |       chatInstances = JSON.parse(storedChatInstances);
197 |     }
198 |   } catch (error) {
199 |     // Handle the error
200 |     console.error(error);
201 |   }
202 | 
203 |   // Add the new chat instance to the beginning of the chatInstances array
204 |   chatInstances = [{ id: chatId, title: `Chat ${chatInstances.length + 1}` }, ...chatInstances];
205 | 
206 |   // Save the updated list of chat instances in the local storage
207 |   try {
208 |     window.localStorage.setItem('chat-instances', JSON.stringify(chatInstances));
209 |   } catch (error) {
210 |     // Handle the error
211 |     console.error(error);
212 |   }
213 | 
214 |   // Reset the messages array
215 |   messages = [];
216 | }
217 | 
218 | 
219 | 
220 | // Function to select a chat instance
221 | async function onSelectChatInstance(event) {
222 |   // Get the chat ID from the URL
223 |   chatId = event.target.getAttribute('href').substring(1);
224 | 
225 |   // Load the messages for the selected chat instance from local storage
226 |   try {
227 |     const storedMessages = window.localStorage.getItem(`chat-${chatId}-messages`);
228 |     if (storedMessages) {
229 |       messages = JSON.parse(storedMessages);
230 |     }
231 |   } catch (error) {
232 |     // Handle the error
233 |     console.error(error);
234 |   }
235 | }
236 | 
237 | 
238 |  
239 | </script>
240 | 
241 | 
242 | 
243 | <!-- left-column left sidebar -->
244 | <div class="left-column">
245 |   <img src={banner1} alt="Banner ad" id="banner">
246 | </div>
247 | 
248 | <!-- center-coloumn for chats conversation -->
249 | <div class="center-column">
250 |   <div class="chat">
251 |     {#if messages.length === 0}
252 |       <div class="prompts-container">
253 |         <div class="prompts-section">
254 |           <h2>Prompts</h2>
255 |           <p class="prompt" data-text="What is your favorite color?">What is your favorite color?</p>
256 |           <p class="prompt" data-text="What is your favorite animal?">What is your favorite animal?</p>
257 |           <p class="prompt" data-text="What is your favorite food?">What is your favorite food?</p>
258 |         </div>
259 |         <div class="features-section">
260 |           <h2>Features</h2>
261 |           <ul>
262 |             <li>Realistic conversations</li>
263 |             <li>Quick responses</li>
264 |             <li>Unlimited chat instances</li>
265 |           </ul>
266 |         </div>
267 |       </div>
268 |     {/if}
269 | 
270 | <p>NEW DISPLAY BELOW:</p>
271 | <!-- Set the reference to the message display container -->
272 | 
273 | <!-- <script>
274 |   export let messages = [];
275 | </script> -->
276 | 
277 | <div class="message-display" bind:this={messageDisplayContainer}>
278 |   {#each messages as message}
279 |     <div class="chat-message {message.type}">
280 |       <!-- {message.text} -->
281 |       {#if message.type === 'user'}
282 |       <p class="user-messageS">{message.text}</p>
283 |     {:else}
284 |       <p class="ai-messageS">
285 |         <Prism language="javascript">{message.text}</Prism>
286 |       </p>
287 |     {/if}
288 |     </div>
289 |   {/each}
290 | </div>
291 | 
292 | <!-- <div class="message-display" bind:this={messageDisplayContainer}>
293 |   {#each messages as message}
294 |     {#if message.type === 'user'}
295 |       <p class="user-message">{message.text}</p>
296 |     {:else}
297 |       <p class="ai-message">{message.text}</p>
298 |     {/if}
299 |   {/each}
300 | </div> -->
301 | 
302 |   
303 |   </div>
304 |     
305 |   {#if chatInstances.length > 0}
306 |     <form on:submit|preventDefault={onSubmit}>
307 |       <input type="text" bind:value={messageUser} placeholder="Type your question here..." />
308 |       <button type="submit">Ask Foskaay</button>
309 |     </form>
310 |   {/if}
311 | </div>
312 | 
313 | 
314 | 
315 | 
316 | <!-- right-colum right sidebar -->
317 | <div class="right-column">
318 |   <button id="new-chat" on:click={onCreateNewChat}>Create New Chat</button>
319 |   <div id="chat-instance-list">
320 |     {#each chatInstances as chatInstance}
321 |       <div class="chat-instance">
322 |         {#if chatInstance.isEditing}
323 |           <input type="text" bind:value={newTitle} on:input={e => newTitle = e.target.value}>
324 |           <br>
325 |           <button>
326 |             Save
327 |           </button>
328 |           <button>
329 |             Cancel
330 |           </button>
331 |         {:else}
332 |           <a href={`#${chatInstance.id}`} on:click={onSelectChatInstance}>{chatInstance.title}</a>
333 |           <button>
334 |             Edit
335 |           </button>
336 |           <button>
337 |             Del
338 |           </button>
339 |         {/if}
340 |       </div>
341 |       <br>
342 |     {/each}
343 |   </div> 
344 | </div>
345 | 
346 | 
347 | 
348 | 
349 | 
350 | 
351 | 
352 | 
353 | <style>
354 |   /* Add a border to the chat container */
355 |   .chat {
356 |     border: 1px solid #ccc;
357 |     background-color: #f5f5f5;
358 |     margin: 0 20px;
359 |     height: 800px;
360 |     overflow: auto;    
361 |   }
362 |   
363 |   
364 |   /* Adjust the font size and font family of the messages */
365 |   .message {
366 |     font-size: 14px;
367 |     font-family: Arial, sans-serif;
368 |   }
369 |   
370 |   /* Add a hover effect to the prompts */
371 |   .prompt:hover {
372 |     color: red;
373 |   }
374 |   
375 |   /* Add styles for the left, center and right columns */
376 |   .left-column {
377 |     width: 15%;
378 |     float: left;
379 |   }
380 |   
381 |   .center-column {
382 |     width: 65%;
383 |     float: left;
384 |   }
385 |   
386 |   /* Add styles for the right column */
387 | .right-column {
388 | width: 20%;
389 | float: left;
390 | }
391 | 
392 | 
393 |   /* Add styles for the banner ad and chat container */
394 |   #banner {
395 |     width: 100%;
396 |   }
397 |   
398 | 
399 |   
400 |   /* Add styles for the prompts container and prompts */
401 |   .prompts-container {
402 |     text-align: center;
403 |   }
404 |   
405 |   .prompts-section {
406 |     margin: 20px;
407 |   }
408 |   
409 |   .prompt {
410 |     cursor: pointer;
411 |     display: inline-block;
412 |     margin: 10px;
413 |     padding: 10px 20px;
414 |     background-color: #eee;
415 |     border-radius: 4px;
416 |   }
417 |   
418 |   /* Add styles for the form and input */
419 |   form {
420 |     display: flex;
421 |     margin: 20px;
422 |   }
423 |   
424 |   input {
425 |     flex: 1;
426 |     padding: 10px;
427 |     border: 1px solid #ccc;
428 |     border-radius: 4px;
429 |   }
430 |   
431 |   button {
432 |     margin-left: 10px;
433 |     padding: 10px 20px;
434 |     border: 1px solid #ccc;
435 |     border-radius: 4px;
436 |   }
437 |   
438 |   .message {
439 |     margin: 10px;
440 |     padding: 10px;
441 |     background-color: #fff;
442 |     border-radius: 4px;
443 |   }
444 | 
445 |   .user {
446 |     background-color: #eee;
447 |   }
448 | 
449 |   .bot {
450 |     background-color: #ddd;
451 |   }
452 | 
453 |   .features-section {
454 |     margin: 20px;
455 |   }
456 | 
457 |   .features-section ul {
458 |     list-style: none;
459 |     padding: 0;
460 |   }
461 | 
462 |   /* Add scrolling to chatinstances title labels */
463 |   #chat-instance-list {
464 |   height: 700px;
465 |   overflow-y: scroll;
466 | }
467 | 
468 | /* prevent the Save and Delete buttons from covering the input field 
469 | by positioning the buttons below the input field */
470 | /* .right-column #chat-instance-list input + button {
471 |   position: absolute;
472 |   bottom: 0;
473 | } */
474 | 
475 | /* edit icon style */
476 | /* .edit-icon {
477 |     cursor: pointer;
478 |   } */ 
479 | 
480 |   
481 | /* observer and scroll message styling */
482 | .message {
483 |     display: flex;
484 |     margin-bottom: 10px;
485 |     padding: 10px;
486 |     border-radius: 10px;
487 |     /* max-width: 90%; */
488 |     word-wrap: break-word;
489 |   }
490 | 
491 |   .user {
492 |     align-self: flex-end;
493 |     background-color: #d2f1e0;
494 |   }
495 | 
496 |   .ai {
497 |     align-self: flex-start;
498 |     background-color: #eaeaea;
499 |   }
500 | 
501 |   /* .message p {
502 |     margin: 0;
503 |   } */
504 | 
505 |   /* This is the CSS code for the message display container */
506 |   .message-display-container {
507 |     height: 700px;
508 |     overflow-y: auto;
509 |   }
510 | 
511 | 
512 |   /* format message for better readability */
513 |   .chat-message {
514 |   margin: 1rem 0;
515 | }
516 | 
517 | .chat-message.user {
518 |   background-color: #f3f3f3;
519 |   padding: 0.5rem 1rem;
520 |   border-radius: 1rem 1rem 0 1rem;
521 | }
522 | 
523 | .chat-message.ai {
524 |   background-color: #5f9ea0;
525 |   color: #fff;
526 |   padding: 0.5rem 1rem;
527 |   border-radius: 1rem 1rem 1rem 0;
528 | }
529 | 
530 | 
531 | 
532 | /* Format messages with paragraphs */
533 | /* .message-display { */
534 |   /* max-height: 300px; */
535 |   /* overflow-y: auto;
536 |   padding: 10px;
537 |   border: 1px solid #ddd;
538 |   border-radius: 5px;
539 | }
540 | 
541 | .user-message {
542 |   margin: 10px 0;
543 |   padding: 5px;
544 |   background-color: #eee;
545 |   border-radius: 5px;
546 | }
547 | 
548 | .ai-message {
549 |   margin: 10px 0;
550 |   padding: 5px;
551 |   background-color: #f3f3f3;
552 |   border-radius: 5px;
553 | } */
554 | 
555 | 
556 | 
557 | </style>


--------------------------------------------------------------------------------
/ui/src/routes/pageCopy6.svelte:
--------------------------------------------------------------------------------
  1 | 
  2 | <svelte:head>
  3 | 	<title>Home</title>
  4 | 	<meta name="description" content="Foskaay Coding Ai" />
  5 | </svelte:head>
  6 | 
  7 | <!-- <svelte:head>
  8 |   <title>Foskaay AI: Ai coding support for programmers</title>
  9 | </svelte:head> -->
 10 | <script lang="ts">
 11 | 	import banner1 from '$lib/images/banner1.jpg';
 12 | 	import { v4 as uuidv4 } from 'uuid';
 13 | 	import Prism from 'svelte-prism';
 14 | 	import '$lib/styles/prism-okaidia.css'; //svelte-prism css
 15 | 	import { onMount } from 'svelte';
 16 | // import '$lib/styles/chat.css';
 17 | //   import { library} from '@fortawesome/fontawesome-svg-core';
 18 | //   import { faEdit, faCheck, faTimes, faTrashCan } from '@fortawesome/free-solid-svg-icons';
 19 | //   import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
 20 |   
 21 |   
 22 |   uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
 23 | //   library.add(faEdit, faCheck, faTimes); // Add the icons you want to use
 24 |  
 25 |   
 26 |   let messageUser = ''; //user's query, question and prompts
 27 |   let messageAi = ''; //foskaay AI response to user's query, question and prompts  
 28 |   let messages = []; //Add both User and Foskaay Ai chatBot response to display to user
 29 |   let chatId; // Auto generate unique ID with UUID per chat instance like ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
 30 |   let chatInstances = []; // array of chat instances added by clicking on "Create New Chat" button
 31 |   let newTitle = '';
 32 |   // Get the reference to the message display container
 33 |   let messageDisplayContainer;
 34 | 
 35 |   
 36 |   // Check if the window object exists to avoid errors in server-side rendering
 37 |   // This will ensure that the code that accesses the window object only 
 38 |   // runs in the client-side environment where the window object is defined, and it will avoid the error in the server-side environment.
 39 |   if (typeof window !== 'undefined') {
 40 |     try {
 41 |       chatId = window.location.hash.substring(1);
 42 |     } catch (error) {
 43 |       // Handle the error
 44 |       console.error(error);
 45 |     }
 46 |   }
 47 |   
 48 |   if (!chatId) {
 49 |   // Generate a new chat ID
 50 |   chatId = uuidv4();
 51 | 
 52 |   if (typeof window !== 'undefined') {
 53 |     // Update the URL with the new chat ID
 54 |     window.history.replaceState(null, null, `#${chatId}`);
 55 |   }
 56 | }
 57 | 
 58 | 
 59 | 
 60 |   // Load the messages from local storage when the component is mounted
 61 | onMount(() => {
 62 |   try {
 63 |     const storedChatInstances = window.localStorage.getItem('chat-instances');
 64 |     if (storedChatInstances) {
 65 |       chatInstances = JSON.parse(storedChatInstances);
 66 |       // selectedChatInstance = chatInstances.find(instance => instance.id === chatId);
 67 |     }
 68 |   } catch (error) {
 69 |     // Handle the error
 70 |     console.error(error);
 71 |   }
 72 | 
 73 | 
 74 |       // Set up an observer to observe the message display container for any changes
 75 |       const observer = new MutationObserver(() => {
 76 |       // Scroll the message display container to the bottom to show the latest messages
 77 |       messageDisplayContainer.scrollTop = messageDisplayContainer.scrollHeight;
 78 |     });
 79 | 
 80 |     // Start observing the message display container for changes
 81 |     observer.observe(messageDisplayContainer, { childList: true, subtree: true });
 82 | 
 83 | });
 84 | 
 85 |   
 86 | 
 87 | 
 88 | 
 89 | 
 90 | 
 91 | async function onSubmit(event) {
 92 |     event.preventDefault();
 93 |   
 94 |     // Add the user's message to the messages array
 95 |     messages = [...messages, { text: messageUser, type: 'user' }];
 96 |   
 97 |     // Save the messages to local storage
 98 |     try {
 99 |       window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
100 |     } catch (error) {
101 |       // Handle the error
102 |       console.error(error);
103 |     }
104 |   
105 |     // Send a POST request to the generate endpoint with the message as the request body
106 |     const response = await fetch('http://localhost:5000', {
107 |       method: 'POST',
108 |       headers: {
109 |         'Content-Type': 'application/json',
110 |       }, 
111 |       body: JSON.stringify({ prompt: messageUser }),
112 |     });
113 |      
114 |     if (response.ok) {
115 | 
116 |       // Get the response from the API as JSON
117 |         let Response = await response.json();
118 |         let rawAiResponse = Response.ai; //assign AI response data content to variable
119 | 
120 |       //pass the api response to highlightCode function to highlight its code
121 |         messageAi = highlightCode(rawAiResponse);
122 |         // let highlightedAiResponse = highlightCode(rawAiResponse);
123 | 
124 |         // Add the AI's message to the messages array
125 |         messages = [...messages, { text: messageAi, type: 'ai' }];
126 |   
127 |       // Save the messages to local storage
128 |       try {
129 |         window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
130 |       } catch (error) {
131 |         // Handle the error
132 |         console.error(error);
133 |       }
134 |     } else {
135 |       alert('An error occurred while submitting the form.');
136 |     }
137 |   
138 |     // Clear the message input
139 |     messageUser = '';
140 | }
141 |   
142 | 
143 | 
144 | 
145 | 
146 | // use regular expressions to identify if there is code in the AI's response and then only apply the syntax highlighting to that specific code
147 | function highlightCode(ai: string) {
148 |     const regex = /```(.*?)\n(.*?)\n```/gs;
149 |     let match;
150 |     while ((match = regex.exec(ai)) !== null) {
151 |         const language = match[1];
152 |         const code = match[2];
153 |         ai = ai.replace(match[0], `<Prism language="${language}">${code}</Prism>`);
154 |     }
155 |     console.log("Highlight Function ReturnAi", ai)
156 |     return ai;
157 |     
158 | }
159 | 
160 | 
161 | 
162 | 
163 |   // Function to create a new chat instance with unique id url and save old one in local storage
164 | async function onCreateNewChat() {
165 |   // Save the current chat instance in the local storage
166 |   try {
167 |     window.localStorage.setItem(`chat-${chatId}-messages`, JSON.stringify(messages));
168 |   } catch (error) {
169 |     // Handle the error
170 |     console.error(error);
171 |   }
172 | 
173 |   // Generate a new chat ID
174 |   chatId = uuidv4();
175 | 
176 |   // Update the URL with the new chat ID
177 |   window.history.replaceState(null, null, `#${chatId}`);
178 | 
179 |   // Retrieve the list of chat instances from the local storage
180 |   try {
181 |     const storedChatInstances = window.localStorage.getItem('chat-instances');
182 |     if (storedChatInstances) {
183 |       chatInstances = JSON.parse(storedChatInstances);
184 |     }
185 |   } catch (error) {
186 |     // Handle the error
187 |     console.error(error);
188 |   }
189 | 
190 |   // Add the new chat instance to the beginning of the chatInstances array
191 |   chatInstances = [{ id: chatId, title: `Chat ${chatInstances.length + 1}` }, ...chatInstances];
192 | 
193 |   // Save the updated list of chat instances in the local storage
194 |   try {
195 |     window.localStorage.setItem('chat-instances', JSON.stringify(chatInstances));
196 |   } catch (error) {
197 |     // Handle the error
198 |     console.error(error);
199 |   }
200 | 
201 |   // Reset the messages array
202 |   messages = [];
203 | }
204 | 
205 | 
206 | 
207 | // Function to select a chat instance
208 | async function onSelectChatInstance(event) {
209 |   // Get the chat ID from the URL
210 |   chatId = event.target.getAttribute('href').substring(1);
211 | 
212 |   // Load the messages for the selected chat instance from local storage
213 |   try {
214 |     const storedMessages = window.localStorage.getItem(`chat-${chatId}-messages`);
215 |     if (storedMessages) {
216 |       messages = JSON.parse(storedMessages);
217 |     }
218 |   } catch (error) {
219 |     // Handle the error
220 |     console.error(error);
221 |   }
222 | }
223 | 
224 | 
225 |  
226 | </script>
227 | 
228 | 
229 | 
230 | <!-- left-column left sidebar -->
231 | <div class="left-column">
232 |   <img src={banner1} alt="Banner ad" id="banner">
233 | </div>
234 | 
235 | <!-- center-coloumn for chats conversation -->
236 | <div class="center-column">
237 |   <div class="chat">
238 |     {#if messages.length === 0}
239 |       <div class="prompts-container">
240 |         <div class="prompts-section">
241 |           <h2>Prompts</h2>
242 |           <p class="prompt" data-text="What is your favorite color?">What is your favorite color?</p>
243 |           <p class="prompt" data-text="What is your favorite animal?">What is your favorite animal?</p>
244 |           <p class="prompt" data-text="What is your favorite food?">What is your favorite food?</p>
245 |         </div>
246 |         <div class="features-section">
247 |           <h2>Features</h2>
248 |           <ul>
249 |             <li>Realistic conversations</li>
250 |             <li>Quick responses</li>
251 |             <li>Unlimited chat instances</li>
252 |           </ul>
253 |         </div>
254 |       </div>
255 |     {/if}
256 | 
257 | <p>Foskaay Coding AI:</p>
258 | 
259 | <!-- Set the reference to the message display container -->
260 | <div class="message-display" bind:this={messageDisplayContainer}>
261 |   <!-- This is the template code for displaying the messages -->
262 |   {#each messages as message}
263 |       {#if message.type === 'user'}
264 |       <p class="user-message">{message.text}</p>
265 |     {:else}
266 |       <p class="ai-message">
267 |         <Prism language="javascript">{message.text}</Prism>
268 |       </p>
269 |     {/if}
270 |   {/each}
271 | </div>
272 | 
273 | 
274 |   
275 |   </div>
276 |     
277 |   {#if chatInstances.length > 0}
278 |     <form on:submit|preventDefault={onSubmit}>
279 |       <input type="text" bind:value={messageUser} placeholder="Type your question here..." />
280 |       <button type="submit">Ask Foskaay</button>
281 |     </form>
282 |   {/if}
283 | </div>
284 | 
285 | 
286 | 
287 | 
288 | <!-- right-colum right sidebar -->
289 | <div class="right-column">
290 |   <button id="new-chat" on:click={onCreateNewChat}>Create New Chat</button>
291 |   <div id="chat-instance-list">
292 |     {#each chatInstances as chatInstance}
293 |       <div class="chat-instance">
294 |         {#if chatInstance.isEditing}
295 |           <input type="text" bind:value={newTitle} on:input={e => newTitle = e.target.value}>
296 |           <br>
297 |           <button>
298 |             Save
299 |           </button>
300 |           <button>
301 |             Cancel
302 |           </button>
303 |         {:else}
304 |           <a href={`#${chatInstance.id}`} on:click={onSelectChatInstance}>{chatInstance.title}</a>
305 |           <button>
306 |             Edit
307 |           </button>
308 |           <button>
309 |             Del
310 |           </button>
311 |         {/if}
312 |       </div>
313 |       <br>
314 |     {/each}
315 |   </div> 
316 | </div>
317 | 
318 | 
319 | 
320 | 
321 | 
322 | 
323 | 
324 | 
325 | <style>
326 |   /* Add a border to the chat container */
327 |   .chat {
328 |     border: 1px solid #ccc;
329 |     background-color: #f5f5f5;
330 |     margin: 0 20px;
331 |     height: 800px;
332 |     overflow: auto;    
333 |   }
334 |   
335 |   
336 |   
337 |   /* Add a hover effect to the prompts */
338 |   .prompt:hover {
339 |     color: red;
340 |   }
341 |   
342 |   /* Add styles for the left, center and right columns */
343 |   .left-column {
344 |     width: 15%;
345 |     float: left;
346 |   }
347 |   
348 |   .center-column {
349 |     width: 65%;
350 |     float: left;
351 |   }
352 |   
353 |   /* Add styles for the right column */
354 | .right-column {
355 | width: 20%;
356 | float: left;
357 | }
358 | 
359 | 
360 |   /* Add styles for the banner ad and chat container */
361 |   #banner {
362 |     width: 100%;
363 |   }
364 |   
365 | 
366 |   
367 |   /* Add styles for the prompts container and prompts */
368 |   .prompts-container {
369 |     text-align: center;
370 |   }
371 |   
372 |   .prompts-section {
373 |     margin: 20px;
374 |   }
375 |   
376 |   .prompt {
377 |     cursor: pointer;
378 |     display: inline-block;
379 |     margin: 10px;
380 |     padding: 10px 20px;
381 |     background-color: #eee;
382 |     border-radius: 4px;
383 |   }
384 |   
385 |   /* Add styles for the form and input */
386 |   form {
387 |     display: flex;
388 |     margin: 20px;
389 |   }
390 |   
391 |   input {
392 |     flex: 1;
393 |     padding: 10px;
394 |     border: 1px solid #ccc;
395 |     border-radius: 4px;
396 |   }
397 |   
398 |   button {
399 |     margin-left: 10px;
400 |     padding: 10px 20px;
401 |     border: 1px solid #ccc;
402 |     border-radius: 4px;
403 |   }
404 |   
405 | 
406 |   .features-section {
407 |     margin: 20px;
408 |   }
409 | 
410 |   .features-section ul {
411 |     list-style: none;
412 |     padding: 0;
413 |   }
414 | 
415 |   /* Add scrolling to chatinstances title labels */
416 |   #chat-instance-list {
417 |   height: 700px;
418 |   overflow-y: scroll;
419 | }
420 | 
421 | 
422 | 
423 | /* format message for better readability */
424 | /* Format messages with paragraphs */
425 | .message-display {
426 |   /* max-height: 300px; */
427 |   overflow-y: auto;
428 |   padding: 10px;
429 |   border: 1px solid #ddd;
430 |   border-radius: 5px;
431 | }
432 | 
433 | .user-message {
434 |   margin: 10px 0;
435 |   padding: 5px;
436 |   background-color: #eee;
437 |   border-radius: 5px;
438 | }
439 | 
440 | .ai-message {
441 |   margin: 10px 0;
442 |   padding: 5px;
443 |   background-color: #f3f3f3;
444 |   border-radius: 5px;
445 | }  
446 | </style>


--------------------------------------------------------------------------------
/ui/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AiHiPUniversity/ai-chatbot-openai-sveltekit-boilerplate-1/abde58b12363206eae0af605ba920b67adf89c38/ui/static/favicon.png


--------------------------------------------------------------------------------
/ui/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import preprocess from 'svelte-preprocess';
 2 | import adapter from '@sveltejs/adapter-auto';
 3 | import { vitePreprocess } from '@sveltejs/kit/vite';
 4 | 
 5 | /** @type {import('@sveltejs/kit').Config} */
 6 | const config = {
 7 | 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 8 | 	// for more information about preprocessors
 9 | 	preprocess: [
10 | 		vitePreprocess(),
11 | 		preprocess({
12 | 			postcss: true
13 | 		})
14 | 	],
15 | 
16 | 	kit: {
17 | 		adapter: adapter()
18 | 	}
19 | };
20 | 
21 | export default config;
22 | 


--------------------------------------------------------------------------------
/ui/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | const config = {
 2 | 	content: ['./src/**/*.{html,js,svelte,ts}'],
 3 | 
 4 | 	theme: {
 5 | 		extend: {}
 6 | 	},
 7 | 
 8 | 	plugins: []
 9 | };
10 | 
11 | module.exports = config;
12 | 


--------------------------------------------------------------------------------
/ui/tests/test.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/test';
2 | 
3 | test('index page has expected h1', async ({ page }) => {
4 | 	await page.goto('/');
5 | 	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
6 | });
7 | 


--------------------------------------------------------------------------------
/ui/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true
12 | 	}
13 | 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
14 | 	//
15 | 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
16 | 	// from the referenced tsconfig.json - TypeScript does not merge them in
17 | }
18 | 


--------------------------------------------------------------------------------
/ui/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { sveltekit } from '@sveltejs/kit/vite';
 2 | import { defineConfig } from 'vitest/config';
 3 | 
 4 | export default defineConfig({
 5 | 	plugins: [sveltekit()],
 6 | 	test: {
 7 | 		include: ['src/**/*.{test,spec}.{js,ts}']
 8 | 	}
 9 | });
10 | 


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