cd-aichat 1.0.0

package/src/utils/state.js

@@ -0,0 +1,224 @@
+/**
+ * State Management Utilities
+ * Provides composable state management for chat features
+ */
+
+import { ref, computed, watch } from 'vue';
+import { saveToStorage, loadFromStorage } from './storage';
+
+/**
+ * Create a persistent reactive state
+ * @param {string} key - Storage key
+ * @param {any} initialValue - Initial value
+ * @param {Object} options - Configuration options
+ * @returns {Object} - Reactive state with persistence
+ */
+export const usePersistentState = (key, initialValue, options = {}) => {
+  const {
+    persist = true,
+    debounce = 300,
+    transform = null,
+    validate = null
+  } = options;
+
+  // Load from storage or use initial value
+  const storedValue = persist ? loadFromStorage(key, initialValue) : initialValue;
+  const state = ref(storedValue);
+
+  // Validation
+  if (validate && !validate(state.value)) {
+    state.value = initialValue;
+  }
+
+  // Auto-persist with debounce
+  if (persist) {
+    let debounceTimer;
+    watch(
+      state,
+      (newValue) => {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+          const valueToSave = transform ? transform(newValue) : newValue;
+          saveToStorage(key, valueToSave);
+        }, debounce);
+      },
+      { deep: true }
+    );
+  }
+
+  return state;
+};
+
+/**
+ * Create a computed state based on multiple sources
+ * @param {Function} computeFn - Computation function
+ * @returns {Object} - Computed state
+ */
+export const useComputedState = (computeFn) => {
+  return computed(computeFn);
+};
+
+/**
+ * Create a state with history tracking
+ * @param {any} initialValue - Initial value
+ * @param {number} maxHistory - Maximum history size
+ * @returns {Object} - State with history methods
+ */
+export const useStateWithHistory = (initialValue, maxHistory = 50) => {
+  const state = ref(initialValue);
+  const history = ref([initialValue]);
+  const historyIndex = ref(0);
+
+  const push = (value) => {
+    // Remove future history if we're not at the end
+    if (historyIndex.value < history.value.length - 1) {
+      history.value = history.value.slice(0, historyIndex.value + 1);
+    }
+
+    // Add new state
+    history.value.push(value);
+    if (history.value.length > maxHistory) {
+      history.value.shift();
+    }
+
+    historyIndex.value = history.value.length - 1;
+    state.value = value;
+  };
+
+  const undo = () => {
+    if (historyIndex.value > 0) {
+      historyIndex.value--;
+      state.value = history.value[historyIndex.value];
+    }
+  };
+
+  const redo = () => {
+    if (historyIndex.value < history.value.length - 1) {
+      historyIndex.value++;
+      state.value = history.value[historyIndex.value];
+    }
+  };
+
+  const canUndo = computed(() => historyIndex.value > 0);
+  const canRedo = computed(() => historyIndex.value < history.value.length - 1);
+
+  return {
+    state,
+    push,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    history: computed(() => history.value)
+  };
+};
+
+/**
+ * Create a state with async loading
+ * @param {Function} asyncFn - Async function to load data
+ * @param {any} initialValue - Initial value
+ * @returns {Object} - State with loading status
+ */
+export const useAsyncState = (asyncFn, initialValue = null) => {
+  const state = ref(initialValue);
+  const loading = ref(false);
+  const error = ref(null);
+
+  const load = async (...args) => {
+    loading.value = true;
+    error.value = null;
+    try {
+      state.value = await asyncFn(...args);
+    } catch (e) {
+      error.value = e;
+      console.error('Async state error:', e);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return {
+    state,
+    loading,
+    error,
+    load
+  };
+};
+
+/**
+ * Create a state with validation
+ * @param {any} initialValue - Initial value
+ * @param {Function} validator - Validation function
+ * @returns {Object} - State with validation
+ */
+export const useValidatedState = (initialValue, validator) => {
+  const state = ref(initialValue);
+  const errors = ref([]);
+
+  const validate = () => {
+    errors.value = validator(state.value) || [];
+    return errors.value.length === 0;
+  };
+
+  const isValid = computed(() => errors.value.length === 0);
+
+  watch(state, () => {
+    validate();
+  }, { deep: true });
+
+  return {
+    state,
+    errors,
+    validate,
+    isValid
+  };
+};
+
+/**
+ * Create a state with reset capability
+ * @param {any} initialValue - Initial value
+ * @returns {Object} - State with reset method
+ */
+export const useResettableState = (initialValue) => {
+  const state = ref(initialValue);
+
+  const reset = () => {
+    state.value = initialValue;
+  };
+
+  const isDirty = computed(() => {
+    return JSON.stringify(state.value) !== JSON.stringify(initialValue);
+  });
+
+  return {
+    state,
+    reset,
+    isDirty
+  };
+};
+
+/**
+ * Create a state with debounced updates
+ * @param {any} initialValue - Initial value
+ * @param {number} delay - Debounce delay in ms
+ * @returns {Object} - State with debounced setter
+ */
+export const useDebouncedState = (initialValue, delay = 300) => {
+  const state = ref(initialValue);
+  const debouncedState = ref(initialValue);
+  let debounceTimer;
+
+  const setState = (value) => {
+    state.value = value;
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      debouncedState.value = value;
+    }, delay);
+  };
+
+  return {
+    state,
+    debouncedState,
+    setState
+  };
+};

package/src/utils/state.test.js

@@ -0,0 +1,198 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { usePersistentState, useStateWithHistory, useResettableState, useDebouncedState } from './state';
+
+describe('State Management Utilities', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    localStorage.clear();
+  });
+
+  describe('usePersistentState', () => {
+    it('should create a persistent reactive state', () => {
+      const state = usePersistentState('test-state', 'initial');
+
+      expect(state.value).toBe('initial');
+    });
+
+    it('should persist state to localStorage', async () => {
+      const state = usePersistentState('test-state', 'initial');
+      state.value = 'updated';
+
+      vi.advanceTimersByTime(300);
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      const stored = localStorage.getItem('cd-aichat-test-state');
+      expect(stored).toContain('updated');
+    });
+
+    it('should load persisted state on creation', () => {
+      localStorage.setItem('cd-aichat-test-state', JSON.stringify('persisted'));
+      const state = usePersistentState('test-state', 'initial');
+
+      expect(state.value).toBe('persisted');
+    });
+
+    it('should validate state on creation', () => {
+      const validator = (value) => value > 0;
+      const state = usePersistentState('test-state', 5, { validate: validator });
+
+      expect(state.value).toBe(5);
+    });
+
+    it('should reset to initial value if validation fails', () => {
+      localStorage.setItem('cd-aichat-test-state', JSON.stringify(-5));
+      const validator = (value) => value > 0;
+      const state = usePersistentState('test-state', 5, { validate: validator });
+
+      expect(state.value).toBe(5);
+    });
+
+    it('should not persist when persist is false', async () => {
+      const state = usePersistentState('test-state', 'initial', { persist: false });
+      state.value = 'updated';
+
+      vi.advanceTimersByTime(300);
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      const stored = localStorage.getItem('cd-aichat-test-state');
+      expect(stored).toBeNull();
+    });
+  });
+
+  describe('useStateWithHistory', () => {
+    it('should track state history', () => {
+      const { state, push, history } = useStateWithHistory('initial');
+
+      push('second');
+      push('third');
+
+      expect(history.value).toEqual(['initial', 'second', 'third']);
+    });
+
+    it('should support undo', () => {
+      const { state, push, undo } = useStateWithHistory('initial');
+
+      push('second');
+      push('third');
+      undo();
+
+      expect(state.value).toBe('second');
+    });
+
+    it('should support redo', () => {
+      const { state, push, undo, redo } = useStateWithHistory('initial');
+
+      push('second');
+      push('third');
+      undo();
+      redo();
+
+      expect(state.value).toBe('third');
+    });
+
+    it('should track undo/redo availability', () => {
+      const { push, undo, redo, canUndo, canRedo } = useStateWithHistory('initial');
+
+      expect(canUndo.value).toBe(false);
+      expect(canRedo.value).toBe(false);
+
+      push('second');
+      expect(canUndo.value).toBe(true);
+
+      undo();
+      expect(canRedo.value).toBe(true);
+    });
+
+    it('should limit history size', () => {
+      const { push, history } = useStateWithHistory('initial', 3);
+
+      push('second');
+      push('third');
+      push('fourth');
+      push('fifth');
+
+      expect(history.value.length).toBe(3);
+      expect(history.value).toEqual(['third', 'fourth', 'fifth']);
+    });
+
+    it('should clear future history on new push after undo', () => {
+      const { push, undo, history } = useStateWithHistory('initial');
+
+      push('second');
+      push('third');
+      undo();
+      push('new');
+
+      expect(history.value).toEqual(['initial', 'second', 'new']);
+    });
+  });
+
+  describe('useResettableState', () => {
+    it('should create a resettable state', () => {
+      const { state, reset } = useResettableState('initial');
+
+      state.value = 'modified';
+      reset();
+
+      expect(state.value).toBe('initial');
+    });
+
+    it('should track dirty state', () => {
+      const { state, isDirty } = useResettableState('initial');
+
+      expect(isDirty.value).toBe(false);
+
+      state.value = 'modified';
+      expect(isDirty.value).toBe(true);
+    });
+
+    it('should handle complex objects', () => {
+      const initial = { count: 0, name: 'test' };
+      const { state, reset, isDirty } = useResettableState(initial);
+
+      state.value.count = 5;
+      expect(isDirty.value).toBe(true);
+
+      reset();
+      expect(state.value).toEqual(initial);
+      expect(isDirty.value).toBe(false);
+    });
+  });
+
+  describe('useDebouncedState', () => {
+    it('should debounce state updates', async () => {
+      const { state, debouncedState, setState } = useDebouncedState('initial', 300);
+
+      setState('updated');
+      expect(state.value).toBe('updated');
+      expect(debouncedState.value).toBe('initial');
+
+      vi.advanceTimersByTime(300);
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      expect(debouncedState.value).toBe('updated');
+    });
+
+    it('should cancel previous debounce on new update', async () => {
+      const { state, debouncedState, setState } = useDebouncedState('initial', 300);
+
+      setState('first');
+      vi.advanceTimersByTime(100);
+
+      setState('second');
+      vi.advanceTimersByTime(100);
+
+      expect(debouncedState.value).toBe('initial');
+
+      vi.advanceTimersByTime(200);
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      expect(debouncedState.value).toBe('second');
+    });
+  });
+});

package/src/utils/storage.js

@@ -0,0 +1,122 @@
+/**
+ * Storage Utilities
+ * Provides localStorage persistence with error handling and size management
+ */
+
+const STORAGE_PREFIX = 'cd-aichat-';
+const MAX_STORAGE_SIZE = 5 * 1024 * 1024; // 5MB
+
+/**
+ * Save data to localStorage with error handling
+ * @param {string} key - Storage key
+ * @param {any} data - Data to store
+ * @returns {boolean} - Success status
+ */
+export const saveToStorage = (key, data) => {
+  try {
+    const prefixedKey = STORAGE_PREFIX + key;
+    const serialized = JSON.stringify(data);
+    
+    // Check size
+    if (serialized.length > MAX_STORAGE_SIZE) {
+      console.warn(`Storage data for key "${key}" exceeds size limit`);
+    }
+    
+    localStorage.setItem(prefixedKey, serialized);
+    return true;
+  } catch (e) {
+    if (e.name === 'QuotaExceededError') {
+      console.error('localStorage quota exceeded');
+      return false;
+    }
+    console.error('Failed to save to storage:', e);
+    return false;
+  }
+};
+
+/**
+ * Load data from localStorage with error handling
+ * @param {string} key - Storage key
+ * @param {any} defaultValue - Default value if not found
+ * @returns {any} - Stored data or default value
+ */
+export const loadFromStorage = (key, defaultValue = null) => {
+  try {
+    const prefixedKey = STORAGE_PREFIX + key;
+    const item = localStorage.getItem(prefixedKey);
+    return item ? JSON.parse(item) : defaultValue;
+  } catch (e) {
+    console.error('Failed to load from storage:', e);
+    return defaultValue;
+  }
+};
+
+/**
+ * Remove data from localStorage
+ * @param {string} key - Storage key
+ * @returns {boolean} - Success status
+ */
+export const removeFromStorage = (key) => {
+  try {
+    const prefixedKey = STORAGE_PREFIX + key;
+    localStorage.removeItem(prefixedKey);
+    return true;
+  } catch (e) {
+    console.error('Failed to remove from storage:', e);
+    return false;
+  }
+};
+
+/**
+ * Clear all prefixed storage items
+ * @returns {boolean} - Success status
+ */
+export const clearStorage = () => {
+  try {
+    const keys = Object.keys(localStorage);
+    keys.forEach(key => {
+      if (key.startsWith(STORAGE_PREFIX)) {
+        localStorage.removeItem(key);
+      }
+    });
+    return true;
+  } catch (e) {
+    console.error('Failed to clear storage:', e);
+    return false;
+  }
+};
+
+/**
+ * Get storage size in bytes
+ * @returns {number} - Total size of prefixed items
+ */
+export const getStorageSize = () => {
+  try {
+    let size = 0;
+    const keys = Object.keys(localStorage);
+    keys.forEach(key => {
+      if (key.startsWith(STORAGE_PREFIX)) {
+        size += localStorage.getItem(key).length;
+      }
+    });
+    return size;
+  } catch (e) {
+    console.error('Failed to get storage size:', e);
+    return 0;
+  }
+};
+
+/**
+ * Check if storage is available
+ * @returns {boolean} - Storage availability
+ */
+export const isStorageAvailable = () => {
+  try {
+    const test = '__storage_test__';
+    localStorage.setItem(test, test);
+    localStorage.removeItem(test);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};

package/src/utils/storage.test.js

@@ -0,0 +1,162 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import {
+  saveToStorage,
+  loadFromStorage,
+  removeFromStorage,
+  clearStorage,
+  getStorageSize,
+  isStorageAvailable
+} from './storage';
+
+describe('Storage Utilities', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    localStorage.clear();
+  });
+
+  describe('saveToStorage', () => {
+    it('should save data to localStorage', () => {
+      const key = 'test-key';
+      const data = { message: 'test' };
+
+      const result = saveToStorage(key, data);
+
+      expect(result).toBe(true);
+      expect(localStorage.getItem('cd-aichat-test-key')).toBeDefined();
+    });
+
+    it('should handle complex objects', () => {
+      const key = 'complex';
+      const data = {
+        nested: { value: 123 },
+        array: [1, 2, 3],
+        date: new Date().toISOString()
+      };
+
+      saveToStorage(key, data);
+      const loaded = loadFromStorage(key);
+
+      expect(loaded).toEqual(data);
+    });
+
+    it('should return false on quota exceeded', () => {
+      // Mock localStorage to throw QuotaExceededError
+      const originalSetItem = localStorage.setItem;
+      localStorage.setItem = vi.fn(() => {
+        const error = new Error('QuotaExceededError');
+        error.name = 'QuotaExceededError';
+        throw error;
+      });
+
+      const result = saveToStorage('test', { data: 'test' });
+
+      expect(result).toBe(false);
+      localStorage.setItem = originalSetItem;
+    });
+  });
+
+  describe('loadFromStorage', () => {
+    it('should load data from localStorage', () => {
+      const key = 'test-key';
+      const data = { message: 'test' };
+
+      saveToStorage(key, data);
+      const loaded = loadFromStorage(key);
+
+      expect(loaded).toEqual(data);
+    });
+
+    it('should return default value if key not found', () => {
+      const defaultValue = { default: true };
+      const loaded = loadFromStorage('non-existent', defaultValue);
+
+      expect(loaded).toEqual(defaultValue);
+    });
+
+    it('should return null if no default provided', () => {
+      const loaded = loadFromStorage('non-existent');
+
+      expect(loaded).toBeNull();
+    });
+
+    it('should handle corrupted data gracefully', () => {
+      localStorage.setItem('cd-aichat-corrupted', 'invalid json {');
+      const defaultValue = { default: true };
+      const loaded = loadFromStorage('corrupted', defaultValue);
+
+      expect(loaded).toEqual(defaultValue);
+    });
+  });
+
+  describe('removeFromStorage', () => {
+    it('should remove data from localStorage', () => {
+      const key = 'test-key';
+      saveToStorage(key, { data: 'test' });
+
+      const result = removeFromStorage(key);
+
+      expect(result).toBe(true);
+      expect(loadFromStorage(key)).toBeNull();
+    });
+
+    it('should handle non-existent keys', () => {
+      const result = removeFromStorage('non-existent');
+
+      expect(result).toBe(true);
+    });
+  });
+
+  describe('clearStorage', () => {
+    it('should clear all prefixed storage items', () => {
+      saveToStorage('key1', { data: 1 });
+      saveToStorage('key2', { data: 2 });
+      localStorage.setItem('other-key', 'value');
+
+      clearStorage();
+
+      expect(loadFromStorage('key1')).toBeNull();
+      expect(loadFromStorage('key2')).toBeNull();
+      expect(localStorage.getItem('other-key')).toBe('value');
+    });
+  });
+
+  describe('getStorageSize', () => {
+    it('should calculate storage size', () => {
+      saveToStorage('key1', { data: 'test' });
+      saveToStorage('key2', { data: 'test' });
+
+      const size = getStorageSize();
+
+      expect(size).toBeGreaterThan(0);
+    });
+
+    it('should return 0 for empty storage', () => {
+      const size = getStorageSize();
+
+      expect(size).toBe(0);
+    });
+  });
+
+  describe('isStorageAvailable', () => {
+    it('should return true when storage is available', () => {
+      const available = isStorageAvailable();
+
+      expect(available).toBe(true);
+    });
+
+    it('should return false when storage is not available', () => {
+      const originalSetItem = localStorage.setItem;
+      localStorage.setItem = vi.fn(() => {
+        throw new Error('Storage not available');
+      });
+
+      const available = isStorageAvailable();
+
+      expect(available).toBe(false);
+      localStorage.setItem = originalSetItem;
+    });
+  });
+});