gpt

frontend/public/locales/de/common.json

@@ -4,6 +4,9 @@
       "pageTitle": "Dashboard",
       "overview": "Übersicht",
       "loadingWidgets": "Widgets werden geladen...",
+      "chatPlaceholder": "Frag etwas...",
+      "chatButton": "Frag GPT",
+
       "loading": "Laden..."
     },
     "login": {

frontend/public/locales/en/common.json

@@ -4,6 +4,9 @@
       "pageTitle": "Dashboard",
       "overview": "Overview",
       "loadingWidgets": "Loading widgets...",
+      "chatPlaceholder": "Ask something...",
+      "chatButton": "Ask GPT",
+
       "loading": "Loading..."
     },
     "login": {

frontend/src/pages/dashboard.tsx

@@ -1,6 +1,6 @@
 import * as icon from '@mdi/js';
 import Head from 'next/head';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import type { ReactElement } from 'react';
 import LayoutAuthenticated from '../layouts/Authenticated';
@@ -22,6 +22,14 @@ const Dashboard = () => {
   const { t } = useTranslation('common');
   const dispatch = useAppDispatch();
   const iconsColor = useAppSelector((state) => state.style.iconsColor);
+  const [userPrompt, setUserPrompt] = useState('');
+  const { gptResponse: chatResponse, isAskingQuestion: chatLoading, errorMessage } = useAppSelector(state => state.openAi);
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (userPrompt.trim()) {
+      dispatch(askGpt(userPrompt));
+    }
+  };
   const corners = useAppSelector((state) => state.style.corners);
   const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
 
@@ -124,6 +132,26 @@ const Dashboard = () => {
           )}
         </title>
       </Head>
+  <form onSubmit={handleSubmit} className="mb-4">
+    <textarea
+      value={userPrompt}
+      onChange={e => setUserPrompt(e.target.value)}
+      className="w-full p-2 border rounded"
+      placeholder={t('pages.dashboard.chatPlaceholder', { defaultValue: 'Ask something...' })}
+    />
+    <button
+      type="submit"
+      className="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
+    >
+      {t('pages.dashboard.chatButton', { defaultValue: 'Ask GPT' })}
+    </button>
+  </form>
+  {chatLoading && <p>{t('pages.dashboard.loading', { defaultValue: 'Loading...' })}</p>}
+  {errorMessage && <p className="text-red-500">{errorMessage}</p>}
+  {chatResponse && (
+    <p className="mt-2 p-2 bg-gray-100 rounded">{chatResponse}</p>
+  )}
+
       <SectionMain>
         <SectionTitleLineWithButton
           icon={icon.mdiChartTimelineVariant}