Botpress 11.9.5自定义用户对话框及添加全局消息时间戳问询

Hey there! Let's work through your timestamp implementation for Botpress chats, including user messages, skill selections, and troubleshooting your override issue.

1. Adding Timestamps to User Messages & Skill Selections #

You've already got timestamps working for bot messages with your InfaText component—great start! To extend this to user messages and skill selections, you can take two approaches:

Option A: Customize Individual Components #

• User Messages: Create a mirror component for user text, similar to your bot message component:

  export class UserText extends React.Component {
    message = this.props.text
    getTimestamp = () => {
      let date = new Date();
      let options = { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" };
      return date.toLocaleTimeString("en-us", options);
    }
    render() {
      return (<div className="userTextMain">
        <p className="userTextMessage">{this.message}</p>
        <small className="userTextTimestamp">{this.getTimestamp()}</small>
      </div>)
    }
  }
  

• Skill Selections (Quick Replies/Options): For skill-based selections, wrap the core quick reply component to add a timestamp:

  export class CustomQuickReply extends React.Component {
    getTimestamp = () => {
      let date = new Date();
      let options = { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" };
      return date.toLocaleTimeString("en-us", options);
    }
    render() {
      return (
        <div className="customQuickReply">
          {/* Render original quick reply content */}
          {this.props.children}
          <small className="replyTimestamp">{this.getTimestamp()}</small>
        </div>
      )
    }
  }
  

Option B: Universal Wrapper (Recommended) #

Avoid duplicating code by using a single wrapper that injects timestamps into all message types:

export class MessageWrapper extends React.Component {
  getTimestamp = () => {
    let date = new Date();
    let options = { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" };
    return date.toLocaleTimeString("en-us", options);
  }

  render() {
    const { children } = this.props;
    return (
      <div className="messageWithTimestamp">
        {children}
        <small className="messageTimestamp">{this.getTimestamp()}</small>
      </div>
    );
  }
}

2. Troubleshooting Your Override Not Working #

You mentioned following guidance but seeing no results—let's check the most common gaps:

• Verify Module Registration: Ensure your infa-module is enabled in botpress.config.json:

  "modules": {
    "infa-module": {
      "enabled": true
    }
  }
  

• Check Component Export: Confirm MySuperOverride is properly exported from modules/infa-module/src/views/lite/index.jsx:

  export const MySuperOverride = (props) => {
    return <MessageWrapper>{props.children}</MessageWrapper>;
  }
  

• Restart Botpress: Module changes require a full server restart to take effect—don't skip this step!
• Clear Browser Cache: Cached assets can block new components from loading. Test in incognito mode or clear your browser cache.
• Target the Correct View: If you're using the lite chat interface, add the override to channel-web/src/views/lite/index.tsx (not the full view).
• Fix Override Syntax: Double-check your override configuration includes the target component:

  overrides: [
    { module: 'infa-module', component: 'MySuperOverride', target: 'Message' }
  ]
  

  The target field tells Botpress which core component to wrap—make sure it's set to Message.

3. General Best Practice for Universal Timestamps #

For the cleanest implementation:

1. Use the single MessageWrapper component to handle all message types.
2. Register the wrapper as an override for the core Message component in both lite and full chat views.
3. Style timestamps consistently with CSS (e.g., align left for user messages, right for bot messages).

内容的提问来源于stack exchange，提问作者AabinGunz