Create a new vanilla JavaScript WeChat Mini Program project in WeChat Developer Tools, with cloud services disabled as all encryption and decryption logic runs entirely client-side. Name the project Scripture Cipher.

Open the newly created project in Trae, press Ctrl + U (Windows) or Command + U (macOS) to launch the AI chat panel, and submit the following requirement prompt:

Build a WeChat Mini Program for text encryption using Buddhist terminology, inspired by the classic Beast Sound Translator tool. Encrypted output must be prefixed with "Buddha says: ", followed by random Buddhist terminology interleaved with encoded original text. Support bidirectional conversion: encrypt plain text to Buddhist-style ciphertext, and decrypt valid ciphertext back to the original plain text. Ensure the same plain text can generate different valid ciphertext outputs on each encryption run, all of which can be decrypted to the identical original content. Add one-tap copy functionality for all output results. Optimize the interface to a chat-style layout similar to WeChat, where user-sent content aligns to the right, and system processing results align to the left. The program should automatically detect input type: if input starts with "Buddha says: ", run decryption, otherwise run encryption.

Using the Claude-3.7-Sonnet model, the AI will generate complete implemantation code for all project files. For Trae v1.3.5, you need to manual click the "Apply" button on the top right of each generated code snippet to write the code to the corresponding project file, as automatic file writing is not enabled in this version.

pages/index/index.wxml

<view class="app-wrapper">
  <view class="header-bar">
    <text class="app-title">Dharma Cipher Tool</text>
  </view>
  
  <scroll-view 
    class="message-scroll-area" 
    scroll-y="true" 
    scroll-top="{{scrollOffset}}"
    id="message-panel"
  >
    <view class="message-list">
      <block wx:for="{{conversationLogs}}" wx:key="id">
        <view class="message-row {{item.sender === 'user' ? 'user-message-row' : 'system-message-row'}}">
          <view class="message-bubble {{item.sender === 'user' ? 'user-bubble' : 'system-bubble'}}" bindtap="copyMessageContent" data-msg-id="{{index}}">
            <text>{{item.content}}</text>
          </view>
        </view>
      </block>
    </view>
  </scroll-view>
  
  <view class="input-bar">
    <input 
      class="chat-input" 
      placeholder="Enter text to encrypt, or ciphertext to decrypt" 
      value="{{currentInput}}" 
      bindinput="handleInputChange"
      confirm-type="send"
      bindconfirm="handleSend"
    />
    <button class="submit-btn" bindtap="handleSend">Send</button>
  </view>
</view>

pages/index/endex.wxss

page {
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #f0f2f5;
}

.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header-bar {
  padding: 24rpx;
  text-align: center;
  background-color: #3b82f6;
  color: #ffffff;
}

.app-title {
  font-size: 36rpx;
  font-weight: 600;
}

.message-scroll-area {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.message-row {
  width: 100%;
  display: flex;
}

.user-message-row {
  justify-content: flex-end;
}

.system-message-row {
  justify-content: flex-start;
}

.message-bubble {
  max-width: 72%;
  padding: 22rpx 26rpx;
  border-radius: 12rpx;
  word-break: break-all;
  font-size: 28rpx;
  line-height: 1.5;
}

.user-bubble {
  background-color: #a5e999;
  color: #222222;
}

.system-bubble {
  background-color: #ffffff;
  color: #333333;
}

.input-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-top: 1rpx solid #e5e7eb;
}

.chat-input {
  flex: 1;
  height: 80rpx;
  background-color: #ffffff;
  border-radius: 8rpx;
  padding: 0 20rpx;
  margin-right: 20rpx;
  font-size: 28rpx;
}

.submit-btn {
  width: 120rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  padding: 0;
  background-color: #3b82f6;
  color: #ffffff;
  border: none;
}

pages/index/index.js

Page({
  data: {
    currentInput: '',
    conversationLogs: [],
    scrollOffset: 0,
    dharmaTermPool: [
      '菩提', '般若', '涅槃', '真如', '实相', '空性', '缘起', '中道', '慈悲', '喜舍',
      '持戒', '忍辱', '精进', '禅定', '智慧', '六度', '四谛', '八正道', '如来', '菩萨',
      '罗汉', '业力', '轮回', '因果', '法身', '报身', '化身', '无量', '无相', '无愿'
    ],
    dharmaCharSet: '菩提般若涅槃真如实相空性缘起中道慈悲喜舍持戒忍辱精进禅定智慧六度四谛八正道如来菩萨罗汉业力轮回因果法身报身化身无量无相无愿'
  },

  handleInputChange(e) {
    this.setData({
      currentInput: e.detail.value
    });
  },

  handleSend() {
    const inputContent = this.data.currentInput.trim();
    if (!inputContent) {
      wx.showToast({
        title: 'Please enter content first',
        icon: 'none'
      });
      return;
    }

    const updatedLogs = [...this.data.conversationLogs, {
      content: inputContent,
      sender: 'user'
    }];

    this.setData({
      conversationLogs: updatedLogs,
      currentInput: ''
    });

    if (inputContent.startsWith('Buddha says: ')) {
      this.runDecryption(inputContent, updatedLogs);
    } else {
      this.runEncryption(inputContent, updatedLogs);
    }
  },

  runEncryption(plainText, logList) {
    const termPool = this.data.dharmaTermPool;
    let cipherText = '';

    for (let i = 0; i < plainText.length; i++) {
      const charUnicode = plainText.charCodeAt(i);
      const randomTermCount = Math.floor(Math.random() * 3) + 3;
      for (let j = 0; j < randomTermCount; j++) {
        const randomIdx = Math.floor(Math.random() * termPool.length);
        cipherText += termPool[randomIdx];
      }
      cipherText += String.fromCharCode(charUnicode + 23);
    }

    const finalCipher = `Buddha says: ${cipherText}`;
    const newLog = [...logList, {
      content: finalCipher,
      sender: 'system'
    }];

    this.setData({
      conversationLogs: newLog
    }, () => {
      this.autoScrollToEnd();
    });
  },

  runDecryption(cipherText, logList) {
    const processedCipher = cipherText.replace('Buddha says: ', '');
    const dharmaChars = this.data.dharmaCharSet;
    let plainText = '';
    let cursor = 0;

    while (cursor < processedCipher.length) {
      while (cursor < processedCipher.length && dharmaChars.includes(processedCipher[cursor])) {
        cursor++;
      }
      if (cursor < processedCipher.length) {
        const originalCode = processedCipher.charCodeAt(cursor) - 23;
        plainText += String.fromCharCode(originalCode);
        cursor++;
      }
    }

    const newLog = [...logList, {
      content: plainText,
      sender: 'system'
    }];

    this.setData({
      conversationLogs: newLog
    }, () => {
      this.autoScrollToEnd();
    });
  },

  copyMessageContent(e) {
    const msgIndex = e.currentTarget.dataset.msgId;
    const targetContent = this.data.conversationLogs[msgIndex].content;
    
    wx.setClipboardData({
      data: targetContent,
      success: () => {
        wx.showToast({
          title: 'Copied successfully',
          icon: 'success'
        });
      }
    });
  },

  autoScrollToEnd() {
    wx.createSelectorQuery()
      .select('#message-panel')
      .boundingClientRect(rect => {
        this.setData({
          scrollOffset: rect.height * 2
        });
      })
      .exec();
  },

  onLoad() {
    this.setData({
      conversationLogs: [{
        content: 'Welcome to Dharma Cipher Tool!\nEnter any plain text to get encrypted Buddhist-style ciphertext, or paste ciphertext starting with "Buddha says: " to decrypt it back to original content.',
        sender: 'system'
      }]
    });
  }
});