Revamped Siri will reportedly offer auto-deleting chats

Learn to build a chatbot interface with auto-deleting chat history, similar to Apple's upcoming Siri AI features. This beginner-friendly tutorial teaches HTML, CSS, and JavaScript fundamentals.

Introduction

In this tutorial, you'll learn how to create a simple chatbot interface that mimics the auto-deleting chat feature mentioned in the Apple Siri AI update. While you won't be building Siri itself, you'll understand the core concepts behind chat history management and automatic cleanup - essential features for privacy-focused AI assistants.

This tutorial will teach you how to build a basic chat interface using HTML, CSS, and JavaScript that automatically clears chat history after a certain time period, similar to what Apple is planning for Siri.

Prerequisites

Before starting this tutorial, you'll need:

A basic understanding of HTML, CSS, and JavaScript
A text editor (like VS Code, Sublime Text, or even Notepad)
A web browser to test your code
No special tools or installations required

Step-by-Step Instructions

Step 1: Create the HTML Structure

We'll start by building the basic webpage structure for our chat interface. This will include a chat display area, input field, and send button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto-Deleting Chat</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="chat-container">
        <div id="chat-history" class="chat-history"></div>
        <div class="input-area">
            <input type="text" id="user-input" placeholder="Type your message...">
            <button id="send-btn">Send</button>
            <button id="clear-btn">Clear Chat</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 2: Add Basic CSS Styling

Now we'll create a clean, modern chat interface with some basic styling to make it look professional.

/* style.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}

.chat-container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.chat-history {
    height: 400px;
    overflow-y: auto;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.message {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
    max-width: 80%;
}

.user-message {
    background-color: #007bff;
    color: white;
    margin-left: auto;
    text-align: right;
}

.bot-message {
    background-color: #e9ecef;
    color: black;
}

.input-area {
    padding: 20px;
    display: flex;
    gap: 10px;
}

#user-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #28a745;
    color: white;
}

#clear-btn {
    background-color: #dc3545;
    margin-left: 10px;
}

Step 3: Implement the Chat Logic

Now we'll add the JavaScript functionality that handles sending messages and simulating chatbot responses.

// script.js
const chatHistory = document.getElementById('chat-history');
const userInput = document.getElementById('user-input');
const sendBtn = document.getElementById('send-btn');
const clearBtn = document.getElementById('clear-btn');

// Store chat history
let messages = [];

// Function to add a message to the chat
function addMessage(text, isUser = false) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
    messageDiv.textContent = text;
    chatHistory.appendChild(messageDiv);
    
    // Scroll to bottom
    chatHistory.scrollTop = chatHistory.scrollHeight;
    
    // Store in history
    messages.push({text, isUser, timestamp: Date.now()});
}

// Function to simulate bot response
function getBotResponse(userMessage) {
    const responses = [
        "I understand what you're saying.",
        "That's interesting, tell me more.",
        "I'm here to help with your questions.",
        "Thanks for sharing that with me.",
        "I can assist you with that.",
        "What else would you like to know?"
    ];
    
    return responses[Math.floor(Math.random() * responses.length)];
}

// Function to send message
function sendMessage() {
    const message = userInput.value.trim();
    if (message) {
        addMessage(message, true);
        userInput.value = '';
        
        // Simulate bot thinking
        setTimeout(() => {
            const botResponse = getBotResponse(message);
            addMessage(botResponse, false);
        }, 1000);
    }
}

// Event listeners
sendBtn.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        sendMessage();
    }
});

// Clear chat button
clearBtn.addEventListener('click', () => {
    chatHistory.innerHTML = '';
    messages = [];
    addMessage("Chat history cleared.", false);
});

Step 4: Add Auto-Delete Feature

Now we'll implement the auto-delete functionality that mimics what Apple is planning for Siri. This feature will automatically clear chat history after a set time period.

// Add this to your script.js file after the existing code

// Auto-delete feature
let autoDeleteTimeout;
const AUTO_DELETE_TIME = 30000; // 30 seconds in milliseconds

// Function to start auto-delete timer
function startAutoDelete() {
    // Clear any existing timer
    if (autoDeleteTimeout) {
        clearTimeout(autoDeleteTimeout);
    }
    
    // Set new timer
    autoDeleteTimeout = setTimeout(() => {
        if (messages.length > 0) {
            chatHistory.innerHTML = '';
            messages = [];
            addMessage("Chat history automatically cleared for privacy.", false);
            addMessage("This is similar to what Apple is planning for Siri.", false);
            console.log("Chat history auto-deleted");
        }
    }, AUTO_DELETE_TIME);
    
    console.log("Auto-delete timer started for " + (AUTO_DELETE_TIME/1000) + " seconds");
}

// Start auto-delete when user sends a message
function sendMessage() {
    const message = userInput.value.trim();
    if (message) {
        addMessage(message, true);
        userInput.value = '';
        
        // Start or reset auto-delete timer
        startAutoDelete();
        
        // Simulate bot thinking
        setTimeout(() => {
            const botResponse = getBotResponse(message);
            addMessage(botResponse, false);
        }, 1000);
    }
}

// Also start auto-delete when page loads
window.addEventListener('load', startAutoDelete);

Step 5: Test Your Chatbot

Save all three files (index.html, style.css, and script.js) in the same folder. Open index.html in your web browser to test your chatbot.

Try these steps:

Type a message in the input field and press Enter or click Send
Watch as your message appears in the chat window
Wait for 30 seconds (the auto-delete time) - the chat history should automatically clear
Try sending another message and see that the timer restarts
Click the Clear Chat button to manually clear the history

Summary

In this tutorial, you've built a chatbot interface that demonstrates the auto-delete feature similar to what Apple plans to implement in Siri. You learned how to:

Create a responsive chat interface with HTML and CSS
Implement message sending and display functionality with JavaScript
Add automatic cleanup of chat history after a time period
Understand how timer functions work in web development

This project illustrates the privacy-focused approach that Apple is taking with its AI assistant updates. The auto-delete feature helps protect user privacy by automatically removing chat history after a certain time, preventing data accumulation. While this is a simplified version, it demonstrates the core concepts behind privacy-conscious AI features that you might see in future AI assistants.