index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>대화 분석 웹 페이지</title>
  <style>
    /* 여기에 CSS 스타일 삽입 */
  </style>
</head>
<body>
  <div id="app">
    <textarea id="inputText" rows="10" cols="30"></textarea>
    <button onclick="parseText()">분석하기</button>
    <select id="userSelect">
      <option value="all">전체</option>
    </select>
    <div id="output"></div>
  </div>

  <script>
    // 여기에 JavaScript 코드 삽입

    function parseText() {
      const lines = document.getElementById('inputText').value.split(/\r?\n/);
      const users = new Set();
      
      lines.forEach((line, index) => {
        const parts = line.split('] ');
        
        // 구성원 추출
        if (parts.length === 3 && !users.has(parts[0])) {
          users.add(parts[0]);
          const option = document.createElement('option');
          option.value = parts[0];
          option.text = parts[0];
          document.getElementById('userSelect').add(option);
        }
      });

      document.getElementById('userSelect').addEventListener('change', function() {
        const selectedUser = this.value;
        const filteredLines = lines.filter(line => {
          return line.startsWith(selectedUser) || selectedUser === 'all';
        });

        document.getElementById('output').innerHTML = filteredLines.join('<br>');
      });

      document.getElementById('userSelect').dispatchEvent(new Event('change'));
    }
  </script>
</body>
</html>