Hugging Face's logo

Spaces:
Abmacode12
/
codecraft-haven
Running

App Files Community
codecraft-haven
File size: 3,666 Bytes 
df47c2a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
class AIAgent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.state = {
      userQuery: '',
      explanation: '',
      loading: false
    };
  }

  connectedCallback() {
    this.render();
    this.setupEventListeners();
  }

  async generateExplanation(query) {
    // Simulate API call
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(`Voici une explication détaillée pour votre demande : "${query}". 
        L'agent IA analyse votre requête et génère un contenu complet adapté à votre projet.`);
      }, 1500);
    });
  }

  async handleSubmit(e) {
    e.preventDefault();
    if (!this.state.userQuery.trim()) return;

    this.setState({ loading: true });
    const result = await this.generateExplanation(this.state.userQuery);
    this.setState({ 
      explanation: result,
      loading: false 
    });
  }

  setState(newState) {
    this.state = { ...this.state, ...newState };
    this.render();
  }

  setupEventListeners() {
    const form = this.shadowRoot.querySelector('form');
    const textarea = this.shadowRoot.querySelector('textarea');
    
    textarea.addEventListener('input', (e) => {
      this.setState({ userQuery: e.target.value });
    });
    
    form.addEventListener('submit', (e) => this.handleSubmit(e));
  }

  render() {
    const welcomeMessage = "Bonjour, je suis votre assistante Agent IA, comment puis-je vous aider avec votre projet aujourd'hui ?";
    
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 100%;
        }
        .container {
          display: flex;
          gap: 20px;
          padding: 20px;
        }
        .column {
          flex: 1;
          background: var(--bg-color, #1e293b);
          border-radius: 8px;
          padding: 16px;
          color: var(--text-color, #f8fafc);
        }
        textarea {
          width: 100%;
          min-height: 120px;
          padding: 12px;
          border-radius: 6px;
          border: 1px solid #334155;
          background: #0f172a;
          color: #f8fafc;
          resize: vertical;
        }
        button {
          background: #3b82f6;
          color: white;
          border: none;
          padding: 8px 16px;
          border-radius: 6px;
          cursor: pointer;
          transition: background 0.2s;
        }
        button:hover {
          background: #2563eb;
        }
        button:disabled {
          background: #64748b;
          cursor: not-allowed;
        }
        h3 {
          margin-top: 0;
          color: #94a3b8;
        }
      </style>
      
      <div class="container">
        <!-- First Column: User Input -->
        <div class="column">
          <h3>Votre demande</h3>
          <form>
            <textarea
              placeholder="Entrez votre demande ici..."
              value="${this.state.userQuery}"
            ></textarea>
            <button type="submit" ${this.state.loading ? 'disabled' : ''}>
              ${this.state.loading ? 'Génération en cours...' : 'Envoyer'}
            </button>
          </form>
        </div>

        <!-- Second Column: AI Response -->
        <div class="column">
          <h3>Agent IA - Assistance</h3>
          <p>${this.state.explanation || welcomeMessage}</p>
        </div>

        <!-- Third Column: Media Preview -->
        <div class="column">
          <h3>Aperçu média</h3>
          <p>Échec de chargement de l'aperçu. La génération automatique de médias sera intégrée ici.</p>
        </div>
      </div>
    `;
  }
}

customElements.define('ai-agent', AIAgent);