@bytexbyte/nxtlinq-ai-agent-ui-react-development 0.1.1

package/src/legacy/chatbot/ui/ModelSelector.tsx

@@ -0,0 +1,190 @@
+/** @jsxImportSource @emotion/react */
+import * as React from 'react';
+import { css } from '@emotion/react';
+import { useChatBot } from '../context/ChatBotContext';
+import { walletTextUtils } from '@bytexbyte/nxtlinq-ai-agent-web-development';
+import { adiSideItalicDataUri } from '../../assets/images/adiSideItalicDataUri';
+
+export const ModelSelector: React.FC = () => {
+  const {
+    availableModels,
+    selectedModelIndex,
+    handleModelChange,
+    serviceId
+  } = useChatBot();
+
+  // Safety check: ensure selectedModelIndex is within bounds
+  const safeSelectedModelIndex = selectedModelIndex >= availableModels.length ? 0 : selectedModelIndex;
+  
+  // Check if current service is Adilas
+  const isAdilasService = walletTextUtils.isAdilasService(serviceId);
+  
+  // Get fallback model label (first available model or 'Unknown')
+  // For Adilas, we don't show the label, only the image
+  const fallbackModelLabel = availableModels.length > 0 
+    ? availableModels[0].label 
+    : 'Unknown';
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuItemClick = (event: React.MouseEvent<HTMLElement>, index: number) => {
+    handleModelChange(index);
+    setAnchorEl(null);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  // Don't show anything if no models available
+  if (availableModels.length === 0) {
+    return null;
+  }
+
+  // For Adilas: only show image, no text (Adilas always has only 1 model)
+  if (isAdilasService) {
+    return (
+      <div css={css`
+        display: flex !important;
+        align-items: center !important;
+        gap: 6px !important;
+      `}>
+        <div css={css`
+          background-color: white !important;
+          border-radius: 4px !important;
+          padding: 2px !important;
+          display: flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+        `}>
+          <img 
+            src={adiSideItalicDataUri} 
+            alt="Adi" 
+            css={css`
+              width: 28px !important;
+              height: 28px !important;
+              display: block !important;
+            `}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  // For other services: handle single or multiple models
+  // If only 1 model, show model name
+  if (availableModels.length === 1) {
+    return (
+      <div css={css`
+        display: flex !important;
+        align-items: center !important;
+        gap: 6px !important;
+      `}>
+        <div css={css`
+          display: flex !important;
+          align-items: center !important;
+          padding: 4px 8px !important;
+          border-radius: 4px !important;
+          background-color: rgba(255, 255, 255, 0.1) !important;
+          font-size: 12px !important;
+          font-weight: 500 !important;
+        `}>
+          <span>{availableModels[0].label}</span>
+        </div>
+      </div>
+    );
+  }
+
+  // If 2+ models, show full selector with dropdown
+  return (
+    <div css={css`
+      display: flex !important;
+      align-items: center !important;
+      position: relative !important;
+      gap: 6px !important;
+    `}>
+      <div
+        css={css`
+          display: flex !important;
+          align-items: center !important;
+          cursor: pointer !important;
+          padding: 4px 8px !important;
+          border-radius: 4px !important;
+          background-color: rgba(255, 255, 255, 0.1) !important;
+          transition: background-color 0.2s !important;
+          font-size: 12px !important;
+          font-weight: 500 !important;
+          gap: 6px !important;
+          
+          &:hover {
+            background-color: rgba(255, 255, 255, 0.2) !important;
+          }
+        `}
+        onClick={handleClick}
+        title="Change AI Model"
+      >
+        <span>
+          {availableModels[safeSelectedModelIndex]?.label || fallbackModelLabel}
+        </span>
+        <span css={css`font-size: 10px !important;`}>▼</span>
+      </div>
+
+      {open && (
+        <div
+          css={css`
+            position: absolute !important;
+            top: 100% !important;
+            left: 0 !important;
+            background-color: white !important;
+            border: 1px solid #ddd !important;
+            border-radius: 4px !important;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
+            z-index: 1000 !important;
+            min-width: 120px !important;
+            margin-top: 4px !important;
+          `}
+        >
+          {availableModels.map((model, index) => (
+            <div
+              key={model.value}
+              css={css`
+                padding: 8px 12px !important;
+                cursor: pointer !important;
+                background-color: ${index === safeSelectedModelIndex ? '#f0f0f0' : 'transparent'} !important;
+                color: ${index === safeSelectedModelIndex ? '#007bff' : '#333'} !important;
+                font-size: 12px !important;
+                border-bottom: ${index < availableModels.length - 1 ? '1px solid #eee' : 'none'} !important;
+                
+                &:hover {
+                  background-color: ${index === safeSelectedModelIndex ? '#f0f0f0' : '#f8f9fa'} !important;
+                }
+              `}
+              onClick={(event) => handleMenuItemClick(event, index)}
+            >
+              {model.label}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {open && (
+        <div
+          css={css`
+            position: fixed !important;
+            top: 0 !important;
+            left: 0 !important;
+            right: 0 !important;
+            bottom: 0 !important;
+            z-index: 999 !important;
+          `}
+          onClick={handleClose}
+        />
+      )}
+    </div>
+  );
+}; 

package/src/legacy/chatbot/ui/NotificationModal.tsx

@@ -0,0 +1,110 @@
+/** @jsxImportSource @emotion/react */
+import * as React from 'react';
+import { css } from '@emotion/react';
+import { createNotification, getNotificationIcon } from '@bytexbyte/nxtlinq-ai-agent-web-development';
+import { actionButton, modalOverlay } from './styles/isolatedStyles';
+
+interface NotificationModalProps {
+  type: 'success' | 'error' | 'info' | 'warning';
+  title: string;
+  message: string;
+  onClose: () => void;
+  onConfirm?: () => void;
+  showConfirm?: boolean;
+  confirmText?: string;
+  cancelText?: string;
+}
+
+export const NotificationModal: React.FC<NotificationModalProps> = ({
+  type,
+  title,
+  message,
+  onClose,
+  onConfirm,
+  showConfirm = false,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel'
+}) => {
+  const icon = getNotificationIcon(type);
+  const notification = createNotification(type, message);
+
+  return (
+    <div css={modalOverlay}>
+      <div css={css`
+        background-color: white !important;
+        padding: 24px !important;
+        border-radius: 12px !important;
+        width: 400px !important;
+        max-width: 90% !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+        text-align: center !important;
+      `}>
+        <div css={css`
+          font-size: 48px !important;
+          margin-bottom: 16px !important;
+        `}>
+          {icon}
+        </div>
+        
+        <h3 css={css`
+          margin: 0 0 12px 0 !important;
+          font-size: 20px !important;
+          font-weight: 600 !important;
+          color: #1a1a1a !important;
+        `}>
+          {title}
+        </h3>
+        
+        <p css={css`
+          margin: 0 0 24px 0 !important;
+          font-size: 16px !important;
+          color: #666 !important;
+          line-height: 1.5 !important;
+        `}>
+          {message}
+        </p>
+        
+        <div css={css`
+          display: flex !important;
+          justify-content: center !important;
+          gap: 12px !important;
+        `}>
+          {showConfirm && onConfirm && (
+            <button
+              onClick={onConfirm}
+              css={css`
+                ${actionButton}
+                background-color: ${type === 'error' ? '#dc3545' : '#007bff'} !important;
+                border-radius: 8px !important;
+                
+                &:hover {
+                  background-color: ${type === 'error' ? '#c82333' : '#0056b3'} !important;
+                }
+              `}
+            >
+              {confirmText}
+            </button>
+          )}
+          
+          <button
+            onClick={onClose}
+            css={css`
+              ${actionButton}
+              background-color: ${showConfirm ? '#f8f9fa' : '#007bff'} !important;
+              color: ${showConfirm ? '#666' : 'white'} !important;
+              border: ${showConfirm ? '1px solid #dee2e6' : 'none'} !important;
+              border-radius: 8px !important;
+              
+              &:hover {
+                background-color: ${showConfirm ? '#e9ecef' : '#0056b3'} !important;
+                border-color: ${showConfirm ? '#ced4da' : 'none'} !important;
+              }
+            `}
+          >
+            {cancelText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};