Feature: WEB UI Improvements: Favourite List, New Search Bar, Language Preferences, Pattern Descriptions etc.

[jmd1010]

This PR adds several Web UI and functionality improvements to make pattern selection more intuitive with the help of pattern descriptions, ability to save favourites, powerful multilingual capabilities, a help reference section, more robust Youtube processing and a variety of small ui improvements.

🎥 Demo Video

https://youtu.be/kpAy_LOgHj4

🌟 Key Features

1. Web UI and Pattern Selection Improvements

• Enhanced pattern selection interface for better user experience
• New pattern descriptions section accessible via modal
• New pattern favourite list and pattern search functionality
• Web UI refinements for clearer interaction
• Help section via modal

2. Multilingual Support System

• Seamless language switching via UI dropdown
• Persistent language state management
• Pattern processing now use the selected language seamlessly

3. YouTube Integration Enhancement

• Robust language handling for YouTube transcript processing
• Chunk-based language maintenance for long transcripts
• Consistent language output throughout transcript analysis

🛠 Technical Implementation

Language Support Architecture

// Language state management
export const languageStore = writable<string>('');

// Chat input language detection
if (qualifier === 'fr') {
  languageStore.set('fr');
  userInput = userInput.replace(/--fr\s*/, '');
}

// Service layer integration
const language = get(languageStore) || 'en';
const languageInstruction = language !== 'en' 
  ? `. Please use the language '${language}' for the output.` 
  : '';

YouTube Processing Enhancement

// Process stream with language instruction per chunk
await chatService.processStream(
  stream,
  (content: string, response?: StreamResponse) => {
    if (currentLanguage !== 'en') {
      content = `${content}. Please use the language '${currentLanguage}' for the output.`;
    }
    // Update messages...
  }
);

Pattern Description Generation Pipeline

The pattern descriptions used in the Pattern Description modal are generated through an automated two-step process:

1. Pattern Extraction (extract_patterns.py)

   • Scans the fabric/patterns directory recursively
   • For each pattern folder, reads first 25 lines of system.md
   • Generates pattern_extracts.json containing:
     • Pattern names
     • Raw pattern content extracts

2. AI Description Generation

   • Processes pattern_extracts.json as input
   • Analyzes each pattern's content and purpose
   • Generates concise, clear descriptions
   • Outputs pattern_descriptions.json with:
     • Pattern names
     • Curated descriptions optimized for UI display

This pipeline ensures:

• Consistent description quality across patterns
• Automated updates as patterns evolve
• Maintainable pattern documentation
• Enhanced user experience through clear pattern explanations

Example Pattern Description Structure:

{
"patterns": [
{
"patternName": "analyze_paper",
"description": "Analyze a scientific paper to identify its primary findings and assess the quality and rigor of its conclusions."
}
]

Added new improvements to pattern description handling:

1. Process Documentation & Automation:

• Added Pattern_Description_Update_Process.md documenting the automated workflow
• Enhanced extract_patterns.py to automatically detect and handle new patterns
• Added placeholder system using "NEEDS_DESCRIPTION" status for new patterns

2. Web GUI Enhancements:

• Updated pattern list and chat components to handle dynamic pattern updates
• Improved pattern store to properly refresh when new patterns are added
• Enhanced pattern interface to support new description states

These changes make the pattern description system more maintainable by:

• Automating the detection of new patterns
• Providing clear documentation for the update process
• Ensuring the Web GUI stays in sync with pattern description updates

🎯 Usage Examples

1. Global Settings

1. Select language from dropdown
2. All interactions use selected language
3. Automatic reset to English after each message

2. YouTube Transcript or Summary

While this should likely become a generic pattern eventually, users should know that simply pasting a youtube url with an input like " Provide transcript or Summary" does work. The output will be in the selected language.

3. Using the Web GUI as an LLM Assistant

Simply enter your question in the chat window and this becomes your customized prompt. No need to select a pattern to use the interface. Try it!

### NOTE
There are probably more files in this pull than absolutely necessary to integrate these WEB GUI enhancements. 

## 💡 Key Benefits

1. **Enhanced User Experience**
   - Intuitive language switching
   - Consistent language handling
   - Seamless integration with existing features

2. **Robust Implementation**
   - Simple yet powerful design
   - No complex language detection needed
   - Direct AI instruction approach

3. **Maintainable Architecture**
   - Clean separation of concerns
   - Stateful language management
   - Easy to extend for new languages

4. **YouTube Integration**
   - Handles long transcripts effectively
   - Maintains language consistency


## 🔄 Implementation Notes

1. **State Management**
   - Language persists until changed
   - Resets to English after each message
   - Handles UI state updates efficiently

2. **Error Handling**
   - Invalid qualifiers are ignored
   - Unknown languages default to English
   - Proper store reset on errors