ИИ-автозаполнение в React с OpenAI

// Без ИИ-автозаполнения:
<input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
 
// С ИИ-автозаполнением:
<AutocompleteInput 
  value={value} 
  onChange={setValue} 
  suggestions={aiSuggestions} 
/>

// Пример запроса к API OpenAI
const completion = await openai.chat.completions.create({
  model: 'gpt-4',
  messages: [{ role: 'user', content: [INLINE]Complete this: ${prompt}[/INLINE] }],
  temperature: 0.7,
  max_tokens: 20
});

// Пример запроса к Google PaLM API
const response = await palm.generate({
  prompt: [INLINE]Complete this: ${prompt}[/INLINE],
  temperature: 0.7,
  maxOutputTokens: 20
});

function AIAutocomplete({ value, onChange }) {
  const [suggestions, setSuggestions] = useState([]);
  const [loading, setLoading] = useState(false);
 
  useEffect(() => {
    if (value.length < 3) {
      setSuggestions([]);
      return;
    }
 
    const getSuggestions = async () => {
      setLoading(true);
      try {
        const result = await fetchSuggestionsFromAI(value);
        setSuggestions(result);
      } catch (error) {
        console.error('Ошибка при получении предложений:', error);
        setSuggestions([]);
      } finally {
        setLoading(false);
      }
    };
 
    const debounceTimer = setTimeout(getSuggestions, 300);
    return () => clearTimeout(debounceTimer);
  }, [value]);
 
  // Рендеринг компонента
}

const express = require('express');
const cors = require('cors');
const { OpenAI } = require('openai');
 
const app = express();
app.use(cors());
app.use(express.json());
 
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
 
app.post('/api/autocomplete', async (req, res) => {
  const { prompt } = req.body;
  try {
    const completion = await openai.chat.completions.create({
      model: 'gpt-4',
      messages: [{ role: 'user', content: [INLINE]Complete this: ${prompt}[/INLINE] }],
      temperature: 0.7,
      max_tokens: 20
    });
    res.json({ completion: completion.choices[0].message.content.trim() });
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: 'Что-то пошло не так' });
  }
});
 
app.listen(5000, () => console.log('Сервер запущен на http://localhost:5000'));

function useAIAutocomplete(inputValue, options = {}) {
  const [suggestions, setSuggestions] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  
  const { debounceTime = 300, minLength = 3 } = options;
  
  useEffect(() => {
    if (inputValue.length < minLength) {
      setSuggestions('');
      return;
    }
    
    const debounceFn = setTimeout(async () => {
      setIsLoading(true);
      setError(null);
      
      try {
        const response = await fetch('/api/autocomplete', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ prompt: inputValue })
        });
        
        if (!response.ok) throw new Error('Ошибка сети');
        
        const data = await response.json();
        setSuggestions(data.completion);
      } catch (err) {
        setError(err.message);
        setSuggestions('');
      } finally {
        setIsLoading(false);
      }
    }, debounceTime);
    
    return () => clearTimeout(debounceFn);
  }, [inputValue, debounceTime, minLength]);
  
  return { suggestions, isLoading, error };
}

function AIInput() {
  const [input, setInput] = useState('');
  const [suggestions, setSuggestions] = useState('');
  
  useEffect(() => {
    const fetchSuggestions = async () => {
      // Запрос к ИИ-сервису
    };
    
    if (input.length > 2) {
      const timerId = setTimeout(fetchSuggestions, 300);
      return () => clearTimeout(timerId);
    }
  }, [input]);
  
  return (
    <div>
      <input 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
      />
      {suggestions && (
        <div className="suggestions">{suggestions}</div>
      )}
    </div>
  );
}

// Хук для ИИ-автозаполнения
function useAIAutocomplete(value, options) {
  const [suggestions, setSuggestions] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  
  // Логика запросов к ИИ
  
  return { suggestions, isLoading };
}
 
// Компонент ввода
function AutocompleteInput({ value, onChange }) {
  const { suggestions, isLoading } = useAIAutocomplete(value);
  
  return (
    <div>
      <input value={value} onChange={onChange} />
      {isLoading && <div>Загрузка...</div>}
      {!isLoading && suggestions && (
        <div className="suggestions">{suggestions}</div>
      )}
    </div>
  );
}

// Создаем контекст для автозаполнения
const AutocompleteContext = createContext();
 
function AutocompleteProvider({ children }) {
  const [state, dispatch] = useReducer(autocompleteReducer, initialState);
  
  // Методы для работы с автозаполнением
  const getSuggestions = async (input) => {
    dispatch({ type: 'FETCH_START' });
    try {
      const suggestions = await fetchFromAI(input);
      dispatch({ type: 'FETCH_SUCCESS', payload: suggestions });
    } catch (error) {
      dispatch({ type: 'FETCH_ERROR', payload: error });
    }
  };
  
  return (
    <AutocompleteContext.Provider value={{ state, getSuggestions }}>
      {children}
    </AutocompleteContext.Provider>
  );
}

// autocompleteSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 
export const fetchSuggestions = createAsyncThunk(
  'autocomplete/fetchSuggestions',
  async (input, { rejectWithValue }) => {
    try {
      const response = await fetch('/api/autocomplete', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt: input })
      });
      
      if (!response.ok) throw new Error('Ошибка сети');
      
      const data = await response.json();
      return data.completion;
    } catch (error) {
      return rejectWithValue(error.message);
    }
  }
);
 
const autocompleteSlice = createSlice({
  name: 'autocomplete',
  initialState: {
    suggestions: '',
    status: 'idle', // 'idle' | 'loading' | 'succeeded' | 'failed'
    error: null
  },
  reducers: {
    clearSuggestions: (state) => {
      state.suggestions = '';
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchSuggestions.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchSuggestions.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.suggestions = action.payload;
      })
      .addCase(fetchSuggestions.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.payload;
      });
  }
});
 
export const { clearSuggestions } = autocompleteSlice.actions;
export default autocompleteSlice.reducer;

function AutocompleteInput() {
  const [input, setInput] = useState('');
  const dispatch = useDispatch();
  const { suggestions, status } = useSelector((state) => state.autocomplete);
  
  useEffect(() => {
    if (input.length > 2) {
      const timerId = setTimeout(() => {
        dispatch(fetchSuggestions(input));
      }, 300);
      return () => clearTimeout(timerId);
    } else {
      dispatch(clearSuggestions());
    }
  }, [input, dispatch]);
  
  return (
    <div>
      <input 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
      />
      {status === 'loading' && <div>Загрузка...</div>}
      {status === 'succeeded' && suggestions && (
        <div className="suggestions">{suggestions}</div>
      )}
    </div>
  );
}

// autocompleteStore.js
import create from 'zustand';
 
const useAutocompleteStore = create((set) => ({
  suggestions: '',
  isLoading: false,
  error: null,
  
  fetchSuggestions: async (input) => {
    if (input.length < 3) {
      set({ suggestions: '' });
      return;
    }
    
    set({ isLoading: true });
    
    try {
      const response = await fetch('/api/autocomplete', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt: input })
      });
      
      if (!response.ok) throw new Error('Ошибка сети');
      
      const data = await response.json();
      set({ suggestions: data.completion, isLoading: false, error: null });
    } catch (error) {
      set({ suggestions: '', isLoading: false, error: error.message });
    }
  },
  
  clearSuggestions: () => set({ suggestions: '' })
}));
 
export default useAutocompleteStore;

function AutocompleteInput() {
  const [input, setInput] = useState('');
  const { suggestions, isLoading, fetchSuggestions, clearSuggestions } = useAutocompleteStore();
  
  useEffect(() => {
    if (input.length > 2) {
      const timerId = setTimeout(() => {
        fetchSuggestions(input);
      }, 300);
      return () => clearTimeout(timerId);
    } else {
      clearSuggestions();
    }
  }, [input, fetchSuggestions, clearSuggestions]);
  
  return (
    <div>
      <input 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
      />
      {isLoading && <div>Загрузка...</div>}
      {!isLoading && suggestions && (
        <div className="suggestions">{suggestions}</div>
      )}
    </div>
  );
}

function AutocompleteInput() {
  const [input, setInput] = useState('');
  const debouncedInput = useDebounce(input, 300);
  
  const { data: suggestions, isLoading } = useQuery(
    ['autocomplete', debouncedInput],
    async () => {
      if (debouncedInput.length < 3) return '';
      
      const response = await fetch('/api/autocomplete', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt: debouncedInput })
      });
      
      if (!response.ok) throw new Error('Ошибка сети');
      
      const data = await response.json();
      return data.completion;
    },
    {
      enabled: debouncedInput.length >= 3,
      staleTime: 60000 // 1 минута
    }
  );
  
  return (
    <div>
      <input 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
      />
      {isLoading && <div>Загрузка...</div>}
      {!isLoading && suggestions && (
        <div className="suggestions">{suggestions}</div>
      )}
    </div>
  );
}
 
// Хук для дебаунсинга
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  
  useEffect(() => {
    const timerId = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    
    return () => clearTimeout(timerId);
  }, [value, delay]);
  
  return debouncedValue;
}

function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
 
useEffect(() => {
  const timerId = setTimeout(() => {
    setDebouncedValue(value);
  }, delay);
  
  return () => clearTimeout(timerId);
}, [value, delay]);
 
return debouncedValue;
}

function useThrottle(value, limit) {
const [throttledValue, setThrottledValue] = useState(value);
const lastRan = useRef(Date.now());
 
useEffect(() => {
  const handler = setTimeout(() => {
    if (Date.now() - lastRan.current >= limit) {
      setThrottledValue(value);
      lastRan.current = Date.now();
    }
  }, limit - (Date.now() - lastRan.current));
  
  return () => clearTimeout(handler);
}, [value, limit]);
 
return throttledValue;
}

function usePredictiveAutocomplete(input) {
// Текущие предложения
const { data: currentSuggestions } = useQuery(
  ['autocomplete', input],
  () => fetchSuggestions(input)
);
 
// Предварительная загрузка для вероятных продолжений
useEffect(() => {
  if (currentSuggestions && currentSuggestions.length > 0) {
    // Предполагаем, что пользователь выберет одно из текущих предложений
    currentSuggestions.forEach(suggestion => {
      const nextInput = input + ' ' + suggestion;
      // Предзагружаем следующие предложения
      queryClient.prefetchQuery(
        ['autocomplete', nextInput],
        () => fetchSuggestions(nextInput)
      );
    });
  }
}, [input, currentSuggestions, queryClient]);
 
return { suggestions: currentSuggestions };
}

import { createMachine, interpret } from 'xstate';
 
const autocompleteMachine = createMachine({
id: 'autocomplete',
initial: 'idle',
context: {
  input: '',
  suggestions: [],
  history: [] // История выбранных предложений
},
states: {
  idle: {
    on: {
      TYPE: {
        target: 'loading',
        actions: 'updateInput'
      }
    }
  },
  loading: {
    invoke: {
      src: 'fetchSuggestions',
      onDone: {
        target: 'success',
        actions: 'setSuggestions'
      },
      onError: {
        target: 'error',
        actions: 'setError'
      }
    }
  },
  success: {
    on: {
      TYPE: {
        target: 'loading',
        actions: 'updateInput'
      },
      SELECT: {
        target: 'idle',
        actions: ['updateInput', 'addToHistory']
      }
    }
  },
  error: {
    on: {
      TYPE: {
        target: 'loading',
        actions: 'updateInput'
      }
    }
  }
}
});

// server.js
require('dotenv').config();
const express = require('express');
const cors = require('cors');
const { OpenAI } = require('openai');
 
const app = express();
app.use(cors());
app.use(express.json());
 
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY // Никогда не хардкодьте ключи!
});
 
app.post('/api/autocomplete', async (req, res) => {
  const { prompt } = req.body;
  
  try {
    const completion = await openai.chat.completions.create({
      model: 'gpt-4',
      messages: [{ role: 'user', content: [INLINE]Complete this: ${prompt}[/INLINE] }],
      temperature: 0.7,
      max_tokens: 20
    });
    
    res.json({ 
      completion: completion.choices[0].message.content.trim() 
    });
  } catch (err) {
    console.error('API Error:', err);
    
    // Обработка разных типов ошибок
    if (err.response) {
      res.status(err.response.status).json({
        error: err.response.data.error.message
      });
    } else {
      res.status(500).json({ 
        error: 'Что-то пошло не так' 
      });
    }
  }
});
 
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Сервер запущен на порту ${PORT}`));

// AutocompleteInput.jsx
import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import './AutocompleteInput.css';
 
function AutocompleteInput() {
  const [input, setInput] = useState('');
  const [suggestion, setSuggestion] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  const inputRef = useRef(null);
  
  useEffect(() => {
    if (input.length < 3) {
      setSuggestion('');
      return;
    }
    
    const fetchSuggestion = async () => {
      setIsLoading(true);
      try {
        const res = await axios.post('/api/autocomplete', { prompt: input });
        setSuggestion(res.data.completion);
      } catch (err) {
        console.error('Ошибка при получении подсказки:', err);
        setError('Не удалось загрузить подсказки');
      } finally {
        setIsLoading(false);
      }
    };
    
    // Дебаунсинг запросов
    const timerId = setTimeout(fetchSuggestion, 300);
    return () => clearTimeout(timerId);
  }, [input]);
  
  const handleInputChange = (e) => {
    setInput(e.target.value);
    setError(null);
  };
  
  // Применение подсказки по нажатию Tab
  const handleKeyDown = (e) => {
    if (e.key === 'Tab' && suggestion) {
      e.preventDefault();
      setInput(input + suggestion);
      setSuggestion('');
    }
  };
  
  return (
    <div className="autocomplete-container">
      <input
        ref={inputRef}
        type="text"
        value={input}
        onChange={handleInputChange}
        onKeyDown={handleKeyDown}
        placeholder="Начните вводить..."
        className="autocomplete-input"
      />
      
      {isLoading && <div className="loading-indicator">Загрузка...</div>}
      
      {error && <div className="error-message">{error}</div>}
      
      {suggestion && !isLoading && (
        <div className="suggestion">
          <span className="input-text">{input}</span>
          <span className="suggestion-text">{suggestion}</span>
          <small>Нажмите Tab для завершения</small>
        </div>
      )}
    </div>
  );
}
 
export default AutocompleteInput;

const emailPrompt = `Я пишу деловое письмо коллеге. Вот начало: "${userInput}"
Предложи продолжение фразы (не более 20 слов) в формальном деловом стиле.`;

const codePrompt = `Дополни код функции на JavaScript:
\`\`\`javascript
${userInput}
\`\`\`
Предложи только следующую строку или блок кода.`;

const creativePrompt = `Я пишу художественный текст. Вот начало абзаца: "${userInput}"
Продолжи эту мысль в том же стиле (не более 20 слов).`;

function getContextAwarePrompt(input, context) {
  switch(context) {
    case 'code':
      return `Дополни код: \`${input}\``;
    case 'email':
      return `Я пишу email. Вот начало: "${input}". Предложи продолжение.`;
    case 'chat':
      return `В чате с другом я написал: "${input}". Как можно продолжить?`;
    default:
      return `Complete this: ${input}`;
  }
}
 
// Использование
app.post('/api/autocomplete', async (req, res) => {
  const { prompt, context } = req.body;
  const contextualPrompt = getContextAwarePrompt(prompt, context);
  
  // ... отправка запроса к OpenAI с контекстуальным промптом
});

app.post('/api/autocomplete/stream', async (req, res) => {
  const { prompt } = req.body;
  
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  
  try {
    const stream = await openai.chat.completions.create({
      model: 'gpt-4',
      messages: [{ role: 'user', content: [INLINE]Complete this: ${prompt}[/INLINE] }],
      temperature: 0.7,
      max_tokens: 20,
      stream: true
    });
    
    for await (const chunk of stream) {
      const content = chunk.choices[0]?.delta?.content || '';
      if (content) {
        res.write(`data: ${JSON.stringify({ content })}\n\n`);
      }
    }
    
    res.write('data: [DONE]\n\n');
    res.end();
  } catch (err) {
    console.error('Error streaming:', err);
    res.write(`data: ${JSON.stringify({ error: 'Ошибка потоковой передачи' })}\n\n`);
    res.end();
  }
});

function StreamingAutocomplete() {
  const [input, setInput] = useState('');
  const [streamingSuggestion, setStreamingSuggestion] = useState('');
  const [isStreaming, setIsStreaming] = useState(false);
  
  useEffect(() => {
    if (input.length < 3) {
      setStreamingSuggestion('');
      return;
    }
    
    setIsStreaming(true);
    let suggestion = '';
    
    const eventSource = new EventSource(`/api/autocomplete/stream?prompt=${encodeURIComponent(input)}`);
    
    eventSource.onmessage = (event) => {
      if (event.data === '[DONE]') {
        setIsStreaming(false);
        eventSource.close();
        return;
      }
      
      const data = JSON.parse(event.data);
      suggestion += data.content;
      setStreamingSuggestion(suggestion);
    };
    
    eventSource.onerror = () => {
      setIsStreaming(false);
      eventSource.close();
    };
    
    return () => {
      eventSource.close();
    };
  }, [input]);
  
  // ... остальной код компонента
}

class RequestQueue {
  constructor() {
    this.queue = [];
    this.processing = false;
    this.rateLimit = 10; // запросов в минуту
    this.timeWindow = 60000; // миллисекунд
    this.requestTimes = [];
  }
  
  enqueue(request) {
    return new Promise((resolve, reject) => {
      this.queue.push({ request, resolve, reject });
      this.processQueue();
    });
  }
  
  async processQueue() {
    if (this.processing || this.queue.length === 0) return;
    
    this.processing = true;
    
    // Проверка rate limit
    const now = Date.now();
    this.requestTimes = this.requestTimes.filter(time => now - time < this.timeWindow);
    
    if (this.requestTimes.length >= this.rateLimit) {
      // Дождемся освобождения слота
      const oldestRequest = this.requestTimes[0];
      const waitTime = this.timeWindow - (now - oldestRequest);
      
      setTimeout(() => {
        this.processing = false;
        this.processQueue();
      }, waitTime + 100);
      
      return;
    }
    
    // Обработка запроса
    const { request, resolve, reject } = this.queue.shift();
    this.requestTimes.push(now);
    
    try {
      const result = await request();
      resolve(result);
    } catch (error) {
      reject(error);
    } finally {
      this.processing = false;
      this.processQueue();
    }
  }
}
 
// Использование
const requestQueue = new RequestQueue();
 
app.post('/api/autocomplete', async (req, res) => {
  try {
    const result = await requestQueue.enqueue(() => {
      return openai.chat.completions.create({
        // параметры запроса
      });
    });
    
    res.json({ completion: result.choices[0].message.content });
  } catch (err) {
    res.status(500).json({ error: 'Ошибка при выполнении запроса' });
  }
});

function PersonalizedAutocomplete() {
  const [input, setInput] = useState('');
  const [suggestion, setSuggestion] = useState('');
  const [history, setHistory] = useState([]);
  
  // Получение персонализированной подсказки
  const fetchPersonalizedSuggestion = async () => {
    try {
      const response = await axios.post('/api/personalized-autocomplete', {
        prompt: input,
        history: history.slice(-5) // Последние 5 выбранных подсказок
      });
      
      setSuggestion(response.data.completion);
    } catch (error) {
      console.error('Ошибка при получении персонализированной подсказки:', error);
    }
  };
  
  // При выборе подсказки добавляем ее в историю
  const acceptSuggestion = () => {
    if (suggestion) {
      const newInput = input + suggestion;
      setInput(newInput);
      setSuggestion('');
      setHistory(prev => [...prev, newInput]);
    }
  };
  
  // ... остальной код компонента
}

app.post('/api/personalized-autocomplete', async (req, res) => {
  const { prompt, history } = req.body;
  
  // Формируем промпт с учетом истории
  const historyContext = history.length > 0 
    ? `Based on the user's previous messages: ${history.join(' | ')}\n`
    : '';
  
  const personalizedPrompt = `${historyContext}Complete this message: ${prompt}`;
  
  // ... запрос к OpenAI с персонализированным промптом
});

// Класс для анализа пользовательского поведения
class UserBehaviorAnalyzer {
    constructor(userId) {
        this.userId = userId;
        this.keyPressTimings = [];
        this.wordFrequency = {};
        this.acceptedSuggestions = [];
        this.rejectedSuggestions = [];
        this.activeHours = Array(24).fill(0);
    }
 
    recordKeyPress(timestamp) {
        this.keyPressTimings.push(timestamp);
        
        // Анализируем время суток
        const hour = new Date(timestamp).getHours();
        this.activeHours[hour]++;
        
        // Очищаем старые записи (старше недели)
        const weekAgo = Date.now() - 7 * 24 * 60 * 60 * 1000;
        this.keyPressTimings = this.keyPressTimings.filter(time => time > weekAgo);
    }
 
    recordWordUsage(word) {
        this.wordFrequency[word] = (this.wordFrequency[word] || 0) + 1;
    }
 
    recordSuggestionResponse(suggestion, accepted) {
        if (accepted) {
            this.acceptedSuggestions.push({suggestion, timestamp: Date.now()});
        } else {
            this.rejectedSuggestions.push({suggestion, timestamp: Date.now()});
        }
    }
 
    // Получаем профиль пользователя для персонализации
    getUserProfile() {
        // Анализируем скорость печати
        let typingSpeed = 'average';
        if (this.keyPressTimings.length > 10) {
            const intervals = [];
            for (let i = 1; i < this.keyPressTimings.length; i++) {
                intervals.push(this.keyPressTimings[i] - this.keyPressTimings[i-1]);
            }
            const avgInterval = intervals.reduce((a, b) => a + b, 0) / intervals.length;
            
            if (avgInterval < 150) typingSpeed = 'fast';
            else if (avgInterval > 300) typingSpeed = 'slow';
        }
        
        // Находим наиболее часто используемые слова
        const commonWords = Object.entries(this.wordFrequency)
            .sort((a, b) => b[1] - a[1])
            .slice(0, 10)
            .map(entry => entry[0]);
        
        // Определяем, когда пользователь наиболее активен
        const mostActiveHour = this.activeHours.indexOf(Math.max(...this.activeHours));
        
        // Анализируем, какие типы предложений принимаются чаще
        const acceptanceRate = this.acceptedSuggestions.length / 
            (this.acceptedSuggestions.length + this.rejectedSuggestions.length || 1);
        
        return {
            typingSpeed,
            commonWords,
            mostActiveHour,
            acceptanceRate
        };
    }
}

function EnhancedAutocomplete({ userId }) {
    const [input, setInput] = useState('');
    const [suggestion, setSuggestion] = useState('');
    const behaviorAnalyzer = useMemo(() => new UserBehaviorAnalyzer(userId), [userId]);
    
    const handleKeyPress = useCallback((e) => {
        behaviorAnalyzer.recordKeyPress(Date.now());
        
        // Анализируем вводимые слова
        if (e.key === ' ' || e.key === '.' || e.key === ',') {
            const lastWord = input.split(/\s+/).pop();
            if (lastWord) behaviorAnalyzer.recordWordUsage(lastWord);
        }
    }, [behaviorAnalyzer, input]);
    
    const fetchPersonalizedSuggestion = useCallback(async () => {
        const userProfile = behaviorAnalyzer.getUserProfile();
        
        try {
            const response = await axios.post('/api/personalized-autocomplete', {
                prompt: input,
                userProfile
            });
            
            setSuggestion(response.data.completion);
        } catch (error) {
            console.error('Ошибка при получении персонализированной подсказки:', error);
        }
    }, [input, behaviorAnalyzer]);
    
    // Используем запрос при каждом изменении ввода
    useEffect(() => {
        if (input.length < 3) return;
        
        const timerId = setTimeout(fetchPersonalizedSuggestion, 300);
        return () => clearTimeout(timerId);
    }, [input, fetchPersonalizedSuggestion]);
    
    // ... остальной код компонента
}

app.post('/api/personalized-autocomplete', async (req, res) => {
    const { prompt, userProfile } = req.body;
    
    // Создаем персонализированный промпт
    let personalizedPrompt = `Complete this message: ${prompt}`;
    
    if (userProfile) {
        personalizedPrompt = `The user typically types ${userProfile.typingSpeed} and commonly uses words like ${userProfile.commonWords.join(', ')}. They are currently active during what is typically their ${userProfile.mostActiveHour}th hour of activity. They tend to ${userProfile.acceptanceRate > 0.7 ? 'accept' : 'be selective about'} suggestions.
 
Complete this message in a way that matches their style: ${prompt}`;
    }
    
    // Запрос к OpenAI
    try {
        const completion = await openai.chat.completions.create({
            model: 'gpt-4',
            messages: [{ role: 'user', content: personalizedPrompt }],
            temperature: 0.7,
            max_tokens: 20
        });
        
        res.json({ completion: completion.choices[0].message.content.trim() });
    } catch (err) {
        res.status(500).json({ error: 'Ошибка при обработке запроса' });
    }
});

async function startFineTuning() {
    try {
        // Загрузить файл тренировочных данных
        const file = await openai.files.create({
            file: fs.createReadableStream('training_data.jsonl'),
            purpose: 'fine-tune'
        });
        
        // Запустить процесс fine-tuning
        const fineTune = await openai.fineTuning.jobs.create({
            training_file: file.id,
            model: 'gpt-3.5-turbo',
            suffix: 'legal-autocomplete'
        });
        
        console.log('Fine-tuning job started:', fineTune);
        
        // Функция для проверки статуса
        async function checkStatus() {
            const status = await openai.fineTuning.jobs.retrieve(fineTune.id);
            console.log('Current status:', status.status);
            
            if (status.status === 'succeeded') {
                console.log('Fine-tuning completed! Model ID:', status.fine_tuned_model);
            } else if (status.status === 'failed') {
                console.error('Fine-tuning failed:', status.error);
            } else {
                // Продолжаем проверять
                setTimeout(checkStatus, 60000); // проверка раз в минуту
            }
        }
        
        // Начать проверку статуса
        setTimeout(checkStatus, 60000);
        
    } catch (error) {
        console.error('Error starting fine-tuning:', error);
    }
}
 
// Запустить процесс
startFineTuning();

app.post('/api/domain-specific-autocomplete', async (req, res) => {
    const { prompt, domain } = req.body;
    
    // Выбор модели в зависимости от домена
    let modelId = 'gpt-4'; // модель по умолчанию
    
    if (domain === 'legal') {
        modelId = 'ft:gpt-3.5-turbo:my-org:legal-autocomplete:id';
    } else if (domain === 'medical') {
        modelId = 'ft:gpt-3.5-turbo:my-org:medical-autocomplete:id';
    }
    
    try {
        const completion = await openai.chat.completions.create({
            model: modelId,
            messages: [{ role: 'user', content: [INLINE]Complete this: ${prompt}[/INLINE] }],
            temperature: 0.3, // Меньшая температура для более предсказуемых ответов
            max_tokens: 30
        });
        
        res.json({ completion: completion.choices[0].message.content.trim() });
    } catch (err) {
        res.status(500).json({ error: 'Ошибка при обработке запроса' });
    }
});

async function getReliableAutocomplete(prompt, options = {}) {
    const { timeout = 3000, retries = 2, fallbackMode = 'local' } = options;
    
    // Функция для запроса к OpenAI с таймаутом
    const fetchWithTimeout = async () => {
        return new Promise(async (resolve, reject) => {
            // Устанавливаем таймаут
            const timeoutId = setTimeout(() => {
                reject(new Error('OpenAI API timeout'));
            }, timeout);
            
            try {
                const result = await openai.chat.completions.create({
                    model: 'gpt-4',
                    messages: [{ role: 'user', content: [INLINE]Complete this: ${prompt}[/INLINE] }],
                    temperature: 0.7,
                    max_tokens: 20
                });
                
                clearTimeout(timeoutId);
                resolve(result.choices[0].message.content.trim());
            } catch (error) {
                clearTimeout(timeoutId);
                reject(error);
            }
        });
    };
    
    // Попытка с ретраями
    for (let attempt = 0; attempt <= retries; attempt++) {
        try {
            return await fetchWithTimeout();
        } catch (error) {
            console.warn(`Attempt ${attempt + 1} failed:`, error);
            
            if (attempt === retries) {
                console.error('All OpenAI API attempts failed, falling back to alternative');
                break;
            }
            
            // Экспоненциальное отступление
            await new Promise(resolve => setTimeout(resolve, 1000 * Math.pow(2, attempt)));
        }
    }
    
    // Запасной вариант, если OpenAI недоступен
    if (fallbackMode === 'local') {
        return getLocalAutocomplete(prompt);
    } else if (fallbackMode === 'cached') {
        return getCachedAutocomplete(prompt);
    } else {
        // Если всё провалилось, возвращаем null или пустую строку
        return '';
    }
}
 
// Простая реализация локального автозаполнения
function getLocalAutocomplete(prompt) {
    // Это может быть простая статистическая модель или предопределенные фразы
    const lastWord = prompt.split(/\s+/).pop().toLowerCase();
    
    const commonCompletions = {
        'привет': ' всем!',
        'спасибо': ' за внимание',
        'пожалуйста': ' обратите внимание',
        // ... другие распространенные завершения
    };
    
    return commonCompletions[lastWord] || '';
}
 
// Получение из кэша похожих запросов
function getCachedAutocomplete(prompt) {
    // Здесь можно реализовать поиск похожих запросов в кэше
    // и вернуть соответствующие завершения
    return '';
}

function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
 
useEffect(() => {
  // Идентификатор таймера для очистки
  const timer = setTimeout(() => {
    setDebouncedValue(value);
  }, delay);
 
  // Очищаем таймер при изменении value или unmount
  return () => {
    clearTimeout(timer);
  };
}, [value, delay]);
 
return debouncedValue;
}

function AutocompleteInput() {
const [input, setInput] = useState('');
const debouncedInput = useDebounce(input, 400); // 400ms задержка
 
// Запрос отправляется только когда debouncedInput изменится
useEffect(() => {
  if (debouncedInput.length < 3) return;
  fetchSuggestions(debouncedInput);
}, [debouncedInput]);
 
// ...остальной код компонента
}

function AutocompleteWithCache() {
const [input, setInput] = useState('');
const debouncedInput = useDebounce(input, 400);
const [suggestions, setSuggestions] = useState('');
const [isLoading, setIsLoading] = useState(false);
const cacheRef = useRef({});
 
useEffect(() => {
  if (debouncedInput.length < 3) {
    setSuggestions('');
    return;
  }
  
  // Проверяем кэш перед запросом
  if (cacheRef.current[debouncedInput]) {
    setSuggestions(cacheRef.current[debouncedInput]);
    return;
  }
  
  setIsLoading(true);
  
  fetchSuggestions(debouncedInput)
    .then(result => {
      // Сохраняем в кэше
      cacheRef.current[debouncedInput] = result;
      setSuggestions(result);
    })
    .catch(error => console.error('Ошибка получения подсказок:', error))
    .finally(() => setIsLoading(false));
}, [debouncedInput]);
 
// ...остальной код компонента
}

function AdaptiveLoadingIndicator({ isLoading }) {
const [showSpinner, setShowSpinner] = useState(false);
 
useEffect(() => {
  let timerId;
  
  if (isLoading) {
    // Показываем спиннер только если загрузка занимает более 300 мс
    timerId = setTimeout(() => setShowSpinner(true), 300);
  } else {
    setShowSpinner(false);
  }
  
  return () => clearTimeout(timerId);
}, [isLoading]);
 
if (!showSpinner) return null;
 
return <div className="spinner">Загрузка...</div>;
}

function OfflineAwareAutocomplete() {
const [input, setInput] = useState('');
const [suggestions, setSuggestions] = useState('');
const [isOnline, setIsOnline] = useState(navigator.onLine);
const debouncedInput = useDebounce(input, 400);
 
// Отслеживаем состояние сети
useEffect(() => {
  const handleOnline = () => setIsOnline(true);
  const handleOffline = () => setIsOnline(false);
  
  window.addEventListener('online', handleOnline);
  window.addEventListener('offline', handleOffline);
  
  return () => {
    window.removeEventListener('online', handleOnline);
    window.removeEventListener('offline', handleOffline);
  };
}, []);
 
// Загрузка предложений с учетом офлайн-режима
useEffect(() => {
  if (debouncedInput.length < 3) {
    setSuggestions('');
    return;
  }
  
  // Сначала проверяем локальный кэш
  const cachedSuggestions = localStorage.getItem(`autocomplete_${debouncedInput}`);
  if (cachedSuggestions) {
    setSuggestions(JSON.parse(cachedSuggestions));
  }
  
  // Если онлайн, запрашиваем новые данные
  if (isOnline) {
    fetchSuggestions(debouncedInput)
      .then(result => {
        setSuggestions(result);
        // Обновляем кэш
        localStorage.setItem(`autocomplete_${debouncedInput}`, JSON.stringify(result));
      })
      .catch(error => {
        console.error('Ошибка получения подсказок:', error);
        // В случае ошибки оставляем данные из кэша
      });
  } else {
    // Если офлайн и нет кэша, показываем сообщение
    if (!cachedSuggestions) {
      setSuggestions(
        'Нет интернет-соединения. Попробуйте ввести другой текст или подключитесь к интернету.'
      );
    }
  }
}, [debouncedInput, isOnline]);
 
// ...остальной код компонента
}

// Простой алгоритм для подбора подсказок на основе частотного анализа
function getLocalSuggestions(input) {
  // Эти данные можно загрузить при инициализации приложения
  const commonPhrases = {
    'привет': ['всем', 'как дела', 'мир'],
    'как': ['дела', 'вы', 'это работает'],
    'спасибо': ['за внимание', 'большое', 'за помощь'],
    // и так далее...
  };
  
  const words = input.toLowerCase().split(/\s+/);
  const lastWord = words[words.length - 1];
  
  // Если последнее слово есть в нашем словаре, предлагаем продолжения
  if (commonPhrases[lastWord]) {
    return commonPhrases[lastWord][0]; // берем самый популярный вариант
  }
  
  // Простая эвристика для поиска частичных совпадений
  for (const [key, suggestions] of Object.entries(commonPhrases)) {
    if (key.startsWith(lastWord) && lastWord.length > 2) {
      return key.slice(lastWord.length) + ' ' + suggestions[0];
    }
  }
  
  return '';
}

function MobileAwareAutocomplete() {
const [input, setInput] = useState('');
const [suggestions, setSuggestions] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [isMobile, setIsMobile] = useState(false);
const debouncedInput = useDebounce(input, isMobile ? 600 : 400); // Увеличиваем задержку на мобильных
 
// Определяем, мобильное устройство или нет
useEffect(() => {
  const checkMobile = () => {
    setIsMobile(window.innerWidth <= 768);
  };
  
  checkMobile();
  window.addEventListener('resize', checkMobile);
  
  return () => window.removeEventListener('resize', checkMobile);
}, []);
 
// Запрос предложений с учетом типа устройства
useEffect(() => {
  if (debouncedInput.length < 3) {
    setSuggestions([]);
    return;
  }
  
  setIsLoading(true);
  
  // На мобильных запрашиваем меньше токенов
  const maxTokens = isMobile ? 10 : 20;
  
  fetchSuggestions(debouncedInput, maxTokens)
    .then(results => {
      // На мобильных показываем меньше вариантов
      const limitedResults = isMobile ? results.slice(0, 2) : results;
      setSuggestions(limitedResults);
    })
    .catch(error => console.error('Ошибка:', error))
    .finally(() => setIsLoading(false));
}, [debouncedInput, isMobile]);
 
return (
  <div className={`autocomplete-container ${isMobile ? 'mobile' : ''}`}>
    <input
      type="text"
      value={input}
      onChange={(e) => setInput(e.target.value)}
      placeholder="Введите текст..."
    />
    
    {isLoading && <div className="loading-indicator">...</div>}
    
    {!isLoading && suggestions.length > 0 && (
      <div className={`suggestions-container ${isMobile ? 'mobile-suggestions' : ''}`}>
        {suggestions.map((suggestion, index) => (
          <div
            key={index}
            className="suggestion-item"
            onClick={() => {
              setInput(input + ' ' + suggestion);
              setSuggestions([]);
            }}
          >
            {suggestion}
          </div>
        ))}
      </div>
    )}
  </div>
);
}

function HybridAutocomplete() {
  const [input, setInput] = useState('');
  const [suggestions, setSuggestions] = useState([]);
  const [inlineSuggestion, setInlineSuggestion] = useState('');
  const inputRef = useRef(null);
  
  // Получаем встроенную подсказку и список вариантов
  useEffect(() => {
    if (input.length < 3) {
      setInlineSuggestion('');
      setSuggestions([]);
      return;
    }
    
    // Для встроенной подсказки берем лучший вариант
    fetchBestSuggestion(input)
      .then(best => setInlineSuggestion(best))
      .catch(e => console.error(e));
      
    // Для выпадающего списка получаем варианты
    fetchAlternativeSuggestions(input)
      .then(alternatives => setSuggestions(alternatives))
      .catch(e => console.error(e));
  }, [input]);
  
  // Обработка принятия встроенной подсказки по Tab
  const handleKeyDown = (e) => {
    if (e.key === 'Tab' && inlineSuggestion) {
      e.preventDefault();
      setInput(input + inlineSuggestion);
      setInlineSuggestion('');
    }
  };
  
  return (
    <div className="hybrid-autocomplete">
      <div className="input-wrapper">
        <input
          ref={inputRef}
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={handleKeyDown}
        />
        
        {inlineSuggestion && (
          <div className="inline-suggestion">
            <span className="entered-text">{input}</span>
            <span className="suggestion-text">{inlineSuggestion}</span>
          </div>
        )}
      </div>
      
      {suggestions.length > 0 && (
        <ul className="suggestions-list">
          {suggestions.map((suggestion, index) => (
            <li 
              key={index}
              onClick={() => {
                setInput(input + ' ' + suggestion);
                setSuggestions([]);
              }}
            >
              {suggestion}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function AccessibleAutocomplete() {
  const [input, setInput] = useState('');
  const [suggestions, setSuggestions] = useState([]);
  const [activeIndex, setActiveIndex] = useState(-1);
  const [isOpen, setIsOpen] = useState(false);
  const comboboxId = useId();
  const listboxId = `${comboboxId}-listbox`;
  
  // Обработка клавиатурной навигации
  const handleKeyDown = (e) => {
    if (!isOpen) return;
    
    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault();
        setActiveIndex(prev => Math.min(prev + 1, suggestions.length - 1));
        break;
      case 'ArrowUp':
        e.preventDefault();
        setActiveIndex(prev => Math.max(prev - 1, 0));
        break;
      case 'Enter':
        if (activeIndex >= 0) {
          e.preventDefault();
          selectSuggestion(suggestions[activeIndex]);
        }
        break;
      case 'Escape':
        e.preventDefault();
        setIsOpen(false);
        break;
      default:
        break;
    }
  };
  
  const selectSuggestion = (suggestion) => {
    setInput(input + ' ' + suggestion);
    setSuggestions([]);
    setIsOpen(false);
    setActiveIndex(-1);
  };
  
  return (
    <div className="accessible-autocomplete">
      <label htmlFor={comboboxId}>Поиск:</label>
      <input
        id={comboboxId}
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={handleKeyDown}
        aria-autocomplete="list"
        aria-controls={isOpen ? listboxId : undefined}
        aria-activedescendant={
          activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined
        }
        role="combobox"
        aria-expanded={isOpen}
      />
      
      {isOpen && suggestions.length > 0 && (
        <ul
          id={listboxId}
          role="listbox"
          className="suggestions-list"
        >
          {suggestions.map((suggestion, index) => (
            <li
              id={`${listboxId}-option-${index}`}
              key={index}
              role="option"
              aria-selected={index === activeIndex}
              onClick={() => selectSuggestion(suggestion)}
              className={index === activeIndex ? 'active' : ''}
            >
              {suggestion}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function TypingIndicator() {
  return (
    <div className="typing-indicator">
      <span></span>
      <span></span>
      <span></span>
    </div>
  );
}

// AutocompleteInput.test.js
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import AutocompleteInput from './AutocompleteInput';
import * as api from '../api/autocomplete';
 
// Мокаем функцию API
jest.mock('../api/autocomplete');
 
describe('AutocompleteInput component', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });
 
  test('должен отображаться без подсказок при коротком вводе', () => {
    render(<AutocompleteInput />);
    const input = screen.getByRole('textbox');
    
    fireEvent.change(input, { target: { value: 'пр' } });
    
    expect(screen.queryByTestId('suggestion')).not.toBeInTheDocument();
    expect(api.fetchSuggestions).not.toHaveBeenCalled();
  });
 
  test('должен запрашивать подсказки при достаточном вводе', async () => {
    // Подготавливаем мок ответа
    api.fetchSuggestions.mockResolvedValue(' мир!');
    
    render(<AutocompleteInput />);
    const input = screen.getByRole('textbox');
    
    fireEvent.change(input, { target: { value: 'Привет' } });
    
    // Проверяем, что запрос был отправлен с правильными параметрами
    await waitFor(() => {
      expect(api.fetchSuggestions).toHaveBeenCalledWith('Привет');
    });
    
    // Проверяем, что подсказка отображается
    const suggestion = await screen.findByTestId('suggestion');
    expect(suggestion).toHaveTextContent(' мир!');
  });
 
  test('должен обрабатывать ошибки API корректно', async () => {
    // Симулируем ошибку API
    api.fetchSuggestions.mockRejectedValue(new Error('API error'));
    
    render(<AutocompleteInput />);
    const input = screen.getByRole('textbox');
    
    fireEvent.change(input, { target: { value: 'Привет' } });
    
    // Проверяем, что сообщение об ошибке отображается
    const errorMsg = await screen.findByTestId('error-message');
    expect(errorMsg).toBeInTheDocument();
  });
});

// mocks/autocompleteResponses.js
export const mockResponses = {
  'Привет': ' мир!',
  'Как дела': '? У меня всё отлично',
  'React это': ' JavaScript-библиотека для создания интерфейсов',
  // другие пары запрос-ответ
};
 
// autocomplete.js
export const fetchSuggestions = async (input) => {
  // В тестовом режиме используем моки
  if (process.env.NODE_ENV === 'test') {
    return mockResponses[input] || '';
  }
  
  // Реальный запрос к API
  const response = await fetch('/api/autocomplete', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt: input }),
  });
  
  const data = await response.json();
  return data.completion;
};