Forced merge: merge ai-dev into master

.gitignore

@@ -1,3 +1,8 @@
 node_modules/
 */node_modules/
 */build/
+
+**/node_modules/
+**/build/
+.DS_Store
+.env

backend/src/config.js

@@ -60,7 +60,7 @@ const config = {
       ? 'https://flatlogic.com/projects'
       : 'http://localhost:3000/projects',
 
-  gpt_key: process.env.GPT_KEY || '',
+  gpt_key: process.env.GPT_KEY || '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',
 };
 
 config.pexelsKey = process.env.PEXELS_KEY || '';

frontend/json/runtimeError.json

@@ -0,0 +1 @@
+{}

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 from 'react';
+import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import type { ReactElement } from 'react';
 import LayoutAuthenticated from '../layouts/Authenticated';
@@ -15,12 +15,21 @@ import { hasPermission } from '../helpers/userPermissions';
 import { fetchWidgets } from '../stores/roles/rolesSlice';
 import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
 import { SmartWidget } from '../components/SmartWidget/SmartWidget';
+import { askGpt, clearResponse } from '../stores/openAiSlice';
 
 import { useAppDispatch, useAppSelector } from '../stores/hooks';
 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);
 
@@ -38,12 +47,23 @@ const Dashboard = () => {
   const [students, setStudents] = React.useState(loadingMessage);
   const [roles, setRoles] = React.useState(loadingMessage);
   const [permissions, setPermissions] = React.useState(loadingMessage);
+  const promptForGreeting = "Write a short ironic greeting for a dashboard page, in 3-5 words.";
+  const isAsking = useAppSelector((state) => state.openAi?.isAskingQuestion ?? false);
+  const gptResp = useAppSelector((state) => state.openAi?.gptResponse);
+  const [greeting, setGreeting] = useState<string>('');
+  useEffect(() => {
+    if (!greeting && gptResp) {
+      setGreeting(gptResp);
+      dispatch(clearResponse());
+    }
+  }, [gptResp, greeting, dispatch]);
+  useEffect(() => { dispatch(askGpt(promptForGreeting)); }, [dispatch]);
 
   const [widgetsRole, setWidgetsRole] = React.useState({
     role: { value: '', label: '' },
   });
   const { currentUser } = useAppSelector((state) => state.auth);
-  const { isFetchingQuery } = useAppSelector((state) => state.openAi);
+  const isFetchingQuery = useAppSelector((state) => state.openAi?.isFetchingQuery ?? false);
 
   const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
 
@@ -119,13 +139,15 @@ const Dashboard = () => {
           )}
         </title>
       </Head>
+
       <SectionMain>
         <SectionTitleLineWithButton
           icon={icon.mdiChartTimelineVariant}
-          title={t('pages.dashboard.overview', { defaultValue: 'Overview' })}
+          title={greeting || t('pages.dashboard.overview', { defaultValue: 'Overview' })}
           main
         >
           {''}
+
         </SectionTitleLineWithButton>
 
         {hasPermission(currentUser, 'CREATE_ROLES') && (
@@ -177,6 +199,23 @@ const Dashboard = () => {
 
         {!!rolesWidgets.length && <hr className='my-6  ' />}
 
+{/* ChatGPT Input Form - relocated above count widgets */}
+<form className='max-w-xs w-full mx-auto mb-4' onSubmit={handleSubmit}>
+  <textarea
+    rows={3}
+    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-1 px-3 py-1 bg-blue-500 text-white rounded'>
+    {t('pages.dashboard.chatButton', { defaultValue: 'Ask GPT' })}
+  </button>
+</form>
+{chatLoading && <p className='text-gray-500'>{loadingMessage}</p>}
+{errorMessage && <p className='text-red-500'>{errorMessage}</p>}
+{chatResponse && <p className='mt-2 p-2 bg-gray-100 rounded'>{chatResponse}</p>}
+
         <div
           id='dashboard'
           className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'
@@ -196,6 +235,8 @@ const Dashboard = () => {
                     <div className='text-3xl leading-tight font-semibold'>
                       {users}
                     </div>
+
+
                   </div>
                   <div>
                     <BaseIcon

frontend/src/stores/openAiSlice.ts

@@ -73,6 +73,11 @@ export const openAiSlice = createSlice({
     setErrorNotification: (state, action) => {
       fulfilledNotify(state, action.payload, 'error');
     },
+    clearResponse: (state) => {
+      state.gptResponse = null;
+      state.isAskingQuestion = false;
+      state.errorMessage = '';
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(aiPrompt.pending, (state) => {
@@ -111,6 +116,6 @@ export const openAiSlice = createSlice({
 });
 
 // Action creators are generated for each case reducer function
-export const { resetNotify, setErrorNotification } = openAiSlice.actions;
+export const { resetNotify, setErrorNotification, clearResponse } = openAiSlice.actions;
 
 export default openAiSlice.reducer;