feat(chat): scaffold chatbotAPI with local Ollama integration

.env.example

@@ -0,0 +1,4 @@
+# Ollama LLM Settings
+# No API key is required for Ollama, by design.
+OLLAMA_BASE_URL=http://host.docker.internal:11434
+OLLAMA_MODEL=llama3

Nginx/dev.conf.d/local.conf

@@ -37,7 +37,7 @@ server {
     }
        location /arduino/ {
         proxy_hide_header X-Frame-Options;
-        proxy_pass http://arduino_frontend;
+        proxy_pass http://arduino_frontend/;
     }
 
   location /kicad-symbols {

docker-compose.dev.yml

@@ -80,6 +80,12 @@ services:
         - "redis:redis_cache"
         - "db:mysql"
 
+    # Allow Django in Docker to reach Ollama running on the host machine.
+    # On Windows/Mac this resolves automatically; on Linux this mapping
+    # is required.
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
+
   celery:
     image: "docker.pkg.github.com/frg-fossee/esim-cloud/celery:dev"
     build: ./esim-cloud-backend/
@@ -117,7 +123,7 @@ services:
   #     - ./mysql_data:/var/lib/mysql
 
   db:
-    image: postgres:15
+    image: postgres:14
     volumes:
       - ./postgres_data:/var/lib/postgresql/data/
     env_file:

eda-frontend/src/components/AIAssistant/ChatInput.js

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { TextField, IconButton, makeStyles } from '@material-ui/core';
+import SendIcon from '@material-ui/icons/Send';
+
+const useStyles = makeStyles((theme) => ({
+  inputContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(1),
+    backgroundColor: '#2d2d2d',
+    borderTop: '1px solid #555',
+  },
+  textField: {
+    flex: 1,
+    backgroundColor: '#404040',
+    borderRadius: 4,
+    '& .MuiInputBase-root': {
+      color: '#fff',
+    },
+    '& .MuiOutlinedInput-notchedOutline': {
+      border: 'none',
+    },
+  },
+  sendButton: {
+    color: theme.palette.primary.main,
+    '&.Mui-disabled': {
+      color: '#666',
+    },
+  },
+}));
+
+export default function ChatInput({ onSend, disabled, inputRef }) {
+  const classes = useStyles();
+  const [text, setText] = useState('');
+
+  const handleSend = () => {
+    const trimmed = text.trim();
+    if (trimmed && !disabled) {
+      onSend(trimmed);
+      setText('');
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div className={classes.inputContainer}>
+      <TextField
+        inputRef={inputRef}
+        className={classes.textField}
+        multiline
+        rowsMax={4}
+        variant="outlined"
+        placeholder="Ask the AI assistant..."
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        disabled={disabled}
+        size="small"
+      />
+      <IconButton 
+        className={classes.sendButton}
+        onClick={handleSend} 
+        disabled={disabled || !text.trim()}
+        aria-label="send message"
+      >
+        <SendIcon />
+      </IconButton>
+    </div>
+  );
+}

eda-frontend/src/components/AIAssistant/ChatMessage.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Paper, Typography, makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles((theme) => ({
+  messageRow: {
+    display: 'flex',
+    width: '100%',
+    marginBottom: theme.spacing(2),
+  },
+  userRow: {
+    justifyContent: 'flex-end',
+  },
+  assistantRow: {
+    justifyContent: 'flex-start',
+  },
+  bubble: {
+    padding: theme.spacing(1, 2),
+    maxWidth: '85%',
+    wordBreak: 'break-word',
+    whiteSpace: 'pre-wrap',
+  },
+  userBubble: {
+    backgroundColor: theme.palette.primary.main,
+    color: '#fff',
+  },
+  assistantBubble: {
+    backgroundColor: '#555',
+    color: '#fff',
+  },
+}));
+
+export default function ChatMessage({ message }) {
+  const classes = useStyles();
+  const isUser = message.sender === 'user';
+
+  return (
+    <div className={`${classes.messageRow} ${isUser ? classes.userRow : classes.assistantRow}`}>
+      <Paper className={`${classes.bubble} ${isUser ? classes.userBubble : classes.assistantBubble}`}>
+        <Typography variant="body2">
+          {message.text}
+        </Typography>
+      </Paper>
+    </div>
+  );
+}