Skip to main content
Table of Contents

Appearance and Customization

TTMSFNCChat exposes appearance settings for message bubbles, timestamps, the send button, the attachment button, and the entry box.

Message style

Appearance.MessageStyle controls how much of the message item the bubble styling covers:

Value Description
cmsAll Bubble wraps icon + title + text.
cmsTextOnly Bubble wraps text only.
Inline example 1PascalC++
TMSFNCChat1.Appearance.MessageStyle := cmsTextOnly;

TMSFNCChat1->Appearance->MessageStyle = cmsTextOnly;
cmsAll vs cmsTextOnly message styles

Timestamps

Inline example 2PascalC++
TMSFNCChat1.MessageTimestamp.Show     := True;
TMSFNCChat1.MessageTimestamp.Format   := 'hh:nn';    // time format string
TMSFNCChat1.MessageTimestamp.Position := mtpBottomLeft;  // mtpTopLeft, mtpTopRight, mtpBottomLeft or mtpBottomRight

TMSFNCChat1->MessageTimestamp->Show     = True;
TMSFNCChat1->MessageTimestamp->Format   = "hh:nn";    // time format string
TMSFNCChat1->MessageTimestamp->Position = mtpBottomLeft;  // mtpTopLeft, mtpTopRight, mtpBottomLeft or mtpBottomRight
Chat message with timestamp below the bubble

Default item appearance

DefaultLeftItem and DefaultRightItem are templates whose settings are copied to new items created via AddMessage:

Inline example 3PascalC++
TMSFNCChat1.DefaultLeftItem.Fill.Color  := gcLightgray;
TMSFNCChat1.DefaultRightItem.Fill.Color := gcLightblue;

TMSFNCChat1->DefaultLeftItem->Fill->Color  = gcLightgray;
TMSFNCChat1->DefaultRightItem->Fill->Color = gcLightblue;

Configure spacing between messages and horizontal margins:

Inline example 4PascalC++
TMSFNCChat1.Appearance.Spacing    := 8;
TMSFNCChat1.Appearance.SideMargin := 12;

TMSFNCChat1->Appearance->Spacing    = 8;
TMSFNCChat1->Appearance->SideMargin = 12;
Chat conversation where left bubbles use the DefaultLeftItem grey fill and right bubbles the DefaultRightItem blue fill Chat conversation where left bubbles use the DefaultLeftItem grey fill and right bubbles the DefaultRightItem blue fill

Send button

The send button is a TTMSFNCToolBarButton accessible via SendButton:

Inline example 5PascalC++
TMSFNCChat1.SendButton.BitmapVisible := True;
TMSFNCChat1.SendButton.Bitmaps.AddBitmapFromFile('C:\Icons\send.png', 1.0);
TMSFNCChat1.SendButton.ShowHint := True;
TMSFNCChat1.SendButton.Hint     := 'Send message';

TMSFNCChat1->SendButton->BitmapVisible = True;
TMSFNCChat1->SendButton->Bitmaps->AddBitmapFromFile("C:\Icons\send.png", 1.0);
TMSFNCChat1->SendButton->ShowHint = True;
TMSFNCChat1->SendButton->Hint     = "Send message";

For a WhatsApp-style rounded circular button, implement OnGetSendButtonRect:

Customize bubbles, timestamps, send and attachment buttons and reloadPascalC++
// Message style - bubble wraps text only vs. title+icon+text
procedure TForm1.CustomizeChat;
begin
  TMSFNCChat1.Appearance.MessageStyle := cmsTextOnly;   // text bubble only
  // TMSFNCChat1.Appearance.MessageStyle := cmsAll;     // full bubble

  // Timestamps
  TMSFNCChat1.MessageTimestamp.Show     := True;
  TMSFNCChat1.MessageTimestamp.Format   := 'hh:nn';
  TMSFNCChat1.MessageTimestamp.Position := mtpBottomLeft;

  // Default item settings (applied to new messages from AddMessage)
  TMSFNCChat1.DefaultLeftItem.Fill.Color  := gcLightgray;
  TMSFNCChat1.DefaultRightItem.Fill.Color := gcLightblue;

  // Spacing between messages
  TMSFNCChat1.Appearance.Spacing    := 8;
  TMSFNCChat1.Appearance.SideMargin := 12;

  // --- Send button ---
  TMSFNCChat1.ShowMessageField := True;
  TMSFNCChat1.SendButton.BitmapVisible := True;
  TMSFNCChat1.SendButton.Bitmaps.AddBitmapFromFile('C:\Icons\send.png', 1.0);
  TMSFNCChat1.SendButton.ShowHint := True;
  TMSFNCChat1.SendButton.Hint     := 'Send message';

  // WhatsApp-style circular send button
  TMSFNCChat1.Appearance.MinEntryBoxHeight                := 30;
  TMSFNCChat1.SendButton.Appearance.NormalFill.Color      := gcLightgray;
  TMSFNCChat1.SendButton.Appearance.Rounding              :=
    TMSFNCChat1.Appearance.MinEntryBoxHeight div 2;
  TMSFNCChat1.SendButton.StretchBitmapIfNoText := False;
  TMSFNCChat1.SendButton.AutoBitmapSize        := False;
  TMSFNCChat1.SendButton.BitmapSize            := 15;
  TMSFNCChat1.OnGetSendButtonRect              := HandleGetSendButtonRect;

  // --- Attachment button ---
  TMSFNCChat1.Appearance.ShowAttachmentButton := True;

  // --- Reload mechanism ---
  TMSFNCChat1.Reload.Enabled := True;
end;

procedure TForm1.HandleGetSendButtonRect(Sender: TObject; var ARect: TRectF);
var
  t, h: Single;
begin
  t := ARect.Top;
  h := TMSFNCChat1.SendButton.Width;
  ARect.Top    := t + (ARect.Bottom - t - h) / 2;
  ARect.Bottom := ARect.Bottom - (ARect.Bottom - t - h) / 2;
end;

procedure TForm1.TMSFNCChat1StartReload(Sender: TObject);
begin
  // Start a background thread to load older messages, then:
  // TMSFNCChat1.StopReload;
end;

// Message style - bubble wraps text only vs. title+icon+text
void __fastcall TForm1::CustomizeChat()
{
  TMSFNCChat1->Appearance->MessageStyle = cmsTextOnly;   // text bubble only
  // TMSFNCChat1->Appearance->MessageStyle = cmsAll;     // full bubble

  // Timestamps
  TMSFNCChat1->MessageTimestamp->Show     = true;
  TMSFNCChat1->MessageTimestamp->Format   = "hh:nn";
  TMSFNCChat1->MessageTimestamp->Position = mtpBottomLeft;

  // Default item settings (applied to new messages from AddMessage)
  TMSFNCChat1->DefaultLeftItem->Fill->Color  = gcLightgray;
  TMSFNCChat1->DefaultRightItem->Fill->Color = gcLightblue;

  // Spacing between messages
  TMSFNCChat1->Appearance->Spacing    = 8;
  TMSFNCChat1->Appearance->SideMargin = 12;

  // --- Send button ---
  TMSFNCChat1->ShowMessageField = true;
  TMSFNCChat1->SendButton->BitmapVisible = true;
  TMSFNCChat1->SendButton->Bitmaps->AddBitmapFromFile("C:\\Icons\\send.png", 1.0);
  TMSFNCChat1->SendButton->ShowHint = true;
  TMSFNCChat1->SendButton->Hint     = "Send message";

  // WhatsApp-style circular send button
  TMSFNCChat1->Appearance->MinEntryBoxHeight                = 30;
  TMSFNCChat1->SendButton->Appearance->NormalFill->Color    = gcLightgray;
  TMSFNCChat1->SendButton->Appearance->Rounding             =
    TMSFNCChat1->Appearance->MinEntryBoxHeight / 2;
  TMSFNCChat1->SendButton->StretchBitmapIfNoText = false;
  TMSFNCChat1->SendButton->AutoBitmapSize        = false;
  TMSFNCChat1->SendButton->BitmapSize            = 15;
  TMSFNCChat1->OnGetSendButtonRect               = HandleGetSendButtonRect;

  // --- Attachment button ---
  TMSFNCChat1->Appearance->ShowAttachmentButton = true;

  // --- Reload mechanism ---
  TMSFNCChat1->Reload->Enabled = true;
}

void __fastcall TForm1::HandleGetSendButtonRect(TObject *Sender, TRectF &ARect)
{
  float t = ARect.Top;
  float h = TMSFNCChat1->SendButton->Width;
  ARect.Top    = t + (ARect.Bottom - t - h) / 2;
  ARect.Bottom = ARect.Bottom - (ARect.Bottom - t - h) / 2;
}

void __fastcall TForm1::TMSFNCChat1StartReload(TObject *Sender)
{
  // Start a background thread to load older messages, then:
  // TMSFNCChat1->StopReload();
}
Rounded circular send button

Attachment button

Show an optional attachment button to the left of the entry box:

Inline example 6PascalC++
TMSFNCChat1.Appearance.ShowAttachmentButton := True;

TMSFNCChat1->Appearance->ShowAttachmentButton = True;

The button is a TTMSFNCToolBarButton accessible via AttachmentButton. Handle OnAttachmentButtonClick to open a file picker or trigger any action.

Entry box height

Inline example 7PascalC++
TMSFNCChat1.Appearance.MinEntryBoxHeight := 30;
TMSFNCChat1.Appearance.MaxEntryBoxHeight := 120;

TMSFNCChat1->Appearance->MinEntryBoxHeight = 30;
TMSFNCChat1->Appearance->MaxEntryBoxHeight = 120;

The memo expands as the user types, bounded by these heights.

Both Header and Footer support HTML-formatted text. Handle OnHeaderAnchorClick / OnFooterAnchorClick for link navigation.

Combining timestamps, default appearance, and entry box height

Set a consistent visual baseline by configuring the timestamp format, default bubble colours, and entry box bounds together before showing the control:

Inline example 8PascalC++
TMSFNCChat1.MessageTimestamp.Show     := True;
TMSFNCChat1.MessageTimestamp.Format   := 'hh:nn';
TMSFNCChat1.MessageTimestamp.Position := mtpBottomLeft;
TMSFNCChat1.DefaultLeftItem.Fill.Color  := gcLightgray;
TMSFNCChat1.DefaultRightItem.Fill.Color := gcLightblue;
TMSFNCChat1.Appearance.Spacing              := 8;
TMSFNCChat1.Appearance.SideMargin           := 12;
TMSFNCChat1.Appearance.MinEntryBoxHeight    := 30;
TMSFNCChat1.Appearance.MaxEntryBoxHeight    := 120;
TMSFNCChat1.Appearance.ShowAttachmentButton := True;

TMSFNCChat1->MessageTimestamp->Show     = True;
TMSFNCChat1->MessageTimestamp->Format   = "hh:nn";
TMSFNCChat1->MessageTimestamp->Position = mtpBottomLeft;
TMSFNCChat1->DefaultLeftItem->Fill->Color  = gcLightgray;
TMSFNCChat1->DefaultRightItem->Fill->Color = gcLightblue;
TMSFNCChat1->Appearance->Spacing              = 8;
TMSFNCChat1->Appearance->SideMargin           = 12;
TMSFNCChat1->Appearance->MinEntryBoxHeight    = 30;
TMSFNCChat1->Appearance->MaxEntryBoxHeight    = 120;
TMSFNCChat1->Appearance->ShowAttachmentButton = True;
Chat with hh:nn timestamps below each bubble, default bubble colours, and an entry box with attachment and send buttons holding a typed reply Chat with hh:nn timestamps below each bubble, default bubble colours, and an entry box with attachment and send buttons holding a typed reply

See also