Boxes for SMS Conversation

Question

How can I render a box to emulate an SMS conversation on a mobile device?

Something looking like this (only the inner boxes containing the actual conversation):

Note that I would like this to be used within a standard document, such as article or book, so the answer HERE is not strictly applicable, since it achieves a good result via a dedicated and standalone document class.

This is what I have done so far, but I would like to add the little 'tags' on the lower left and right corners, etc...

\documentclass{article}

\usepackage[framemethod=TikZ]{mdframed}
\mdfdefinestyle{MDSMSLEFT}{%
    linecolor=blue,
    outerlinewidth=1pt,
    roundcorner=5pt,
    %innertopmargin=\baselineskip,
    %innerbottommargin=\baselineskip,
    innerrightmargin=5pt,
    innerleftmargin=5pt,
    backgroundcolor=blue!50!white}

\newcommand{\smsleft}[1]{
    \begin{minipage}{0.75\linewidth}
        \begin{mdframed}[style=MDSMSLEFT] #1 \end{mdframed}
    \vspace*{\baselineskip}
    \end{minipage}\par
}

\begin{document}

\smsleft{This is a message}

\end{document}

Answer 1

Here's one option using tcolorbox:

The code:

\documentclass{article}
\usepackage[many]{tcolorbox}
\usetikzlibrary{shadows}

\definecolor{mybluei}{RGB}{66,134,218}
\definecolor{mygray}{RGB}{213,216,223}
\definecolor{mygreen}{RGB}{213,216,223}
\definecolor{incoming}{RGB}{206,206,206}
\definecolor{outgoing}{RGB}{186,233,95}
\definecolor{outgoingtop}{RGB}{227,242,221}
\definecolor{incomingtop}{RGB}{240,240,240}
\definecolor{pbutton}{RGB}{221,234,243} 
\definecolor{bottombg}{RGB}{217,217,217} 
\definecolor{bottomblue}{RGB}{86,117,142}

\newtcolorbox{tcbSMS}[1]{
enhanced,
arc=0pt,
outer arc=0pt,
width=10cm,
toptitle=15pt,
bottomtitle=15pt,
title={\null},
colback=mygray,
overlay={
  \node[anchor=east] 
    at (title.east) 
    {\includegraphics[height=30pt]{SMSphone}};
  \node[draw=white,line width=2pt,anchor=west,inner sep=0pt] 
    at ([xshift=5pt]title.west) (picture) 
    {\includegraphics[height=26pt]{picture}};
  \node[anchor=north west,text=white,font=\Large\sffamily] at (picture.north east) (phonenumb) {#1};
  \node[anchor=south west,text=black,font=\sffamily] at (picture.south east) (phonenumb) {#1};
  \fill[top color=bottombg!50,bottom color=bottombg!95!black,middle color=bottombg!50]
    (frame.south west) rectangle
    ([yshift=2cm]frame.south east);
  \draw[black]
    ([yshift=2cm]frame.south west) --
    ([yshift=2cm]frame.south east);
  \draw[white]
    ([yshift=2cm-1pt]frame.south west) --
    ([yshift=2cm-1pt]frame.south east);
  \node[circle,draw,fill=pbutton,inner sep=6.8pt,drop shadow={shadow xshift=0.1ex,shadow yshift=-0.2ex,opacity=.6, fill=black!70}]
    (plus)
    at ([shift={(25pt,1.4cm)}]frame.south west) {};
  \draw[line width=2pt,bottomblue]
    ([xshift=-5pt]plus.center) -- ([xshift=5pt]plus.center)    
    ([yshift=-5pt]plus.center) -- ([yshift=5pt]plus.center);
  \foreach \Value in {-12,-9,...,12}
  {
    \fill[gray,opacity=0.8] ([shift={(\Value pt,-6pt)}]plus.south) circle (0.5pt) ;      
    \fill[gray,opacity=0.8] ([shift={(\Value pt,-8.5pt)}]plus.south) circle (0.5pt) ;      
  }
  \node[font=\sffamily,text=gray]
  at ([yshift=-0.7cm]plus.south)
  {(160)/1};
  \node[draw=bottomblue,top color=mygray!40,bottom color=mygray!40,middle color=white,line width=1pt,rounded corners=2pt,text width=5.5cm,minimum height=1.5cm,font=\Large\sffamily,text=gray,inner xsep=6pt]
    at ([shift={(-5pt,1cm)}]frame.south) {\rule[-0.2cm]{1pt}{0.8cm}Type to compose};
  \node[draw=white,rounded corners=2pt,text width=1cm,minimum height=1.5cm,font=\Large\sffamily,text=gray!60,inner xsep=6pt,anchor=east]
    at ([shift={(-5pt,1cm)}]frame.south east) (send) {Send};
    \draw[black!50,rounded corners=2pt]
      ([shift={(-\pgflinewidth,\pgflinewidth)}]send.north west) 
        rectangle 
      ([shift={(\pgflinewidth,-\pgflinewidth)}]send.south east);
  },
boxrule=0pt,  
title style={top color=mybluei!80!black,bottom color=mybluei!80!black,middle color=mybluei},
bottom=3cm
}

\newtcbox{incoming}[1]{
  enhanced,
  interior code={},
  frame code={
    \coordinate (aux1) at ([shift={(-5pt,0pt)}]frame.south west);
    \filldraw[incoming,draw=black]
      (aux1) to[bend right]
      ([shift={(0pt,\BoxP)}]frame.south west) --
      ([shift={(\BoxP,0pt)}]frame.south west) arc(270:230:\BoxP)
      to[bend left] (aux1);
    \filldraw[incoming,draw=black]
      ([shift={(0pt,\BoxP)}]frame.south west) --
      ([shift={(0pt,-\BoxP)}]frame.north west) to[out=90,in=180]
      ([shift={(\BoxP,0pt)}]frame.north west) --
      ([shift={(-\BoxP,0pt)}]frame.north east) to[out=0,in=90]
      ([shift={(0pt,-\BoxP)}]frame.north east) --
      ([shift={(0pt,\BoxP)}]frame.south east) to[out=-90,in=0]
      ([shift={(-\BoxP,0pt)}]frame.south east) --
      ([shift={(\BoxP,0pt)}]frame.south west) arc(270:230:\BoxP)
      ([shift={(0pt,\BoxP)}]frame.south west);
    \fill[incomingtop]
      ([shift={(2pt,-\BoxP)}]frame.north west) --
      ([shift={(-2pt,-\BoxP)}]frame.north east) to[out=90,in=0]
      ([shift={(-\BoxP,-2pt)}]frame.north east) --
      ([shift={(\BoxP,-2pt)}]frame.north west) to[out=180,in=90]
      cycle;
  },
  width=7cm,
  bottom=0pt,
  capture=minipage,
  fontupper=\sffamily,
  attach boxed title to top left,
  coltitle=black,
  fonttitle=\sffamily,
  boxed title style={size=small,frame empty,interior empty},
  title=#1,
  left=2pt,
  right=2pt
}

\def\BoxP{8pt}

\newtcbox{outgoing}[1]{
  enhanced,
  interior code={},
  frame code={
    \coordinate (aux1) at ([shift={(5pt,0pt)}]frame.south east);
    \filldraw[outgoing,draw=black]
      (aux1) to[bend left]
      ([shift={(0pt,\BoxP)}]frame.south east) -- 
      ([shift={(-\BoxP,0pt)}]frame.south east) arc(270:310:\BoxP)
      to[bend right] (aux1);
    \filldraw[outgoing,draw=black]
      ([shift={(0pt,\BoxP)}]frame.south east) --
      ([shift={(0pt,-\BoxP)}]frame.north east) to[out=90,in=0]
      ([shift={(-\BoxP,0pt)}]frame.north east) --
      ([shift={(\BoxP,0pt)}]frame.north west) to[out=180,in=90]
      ([shift={(0pt,-\BoxP)}]frame.north west) --
      ([shift={(0pt,\BoxP)}]frame.south west) to[out=-90,in=180]
      ([shift={(\BoxP,0pt)}]frame.south west) --
      ([shift={(-\BoxP,0pt)}]frame.south east) arc(270:310:\BoxP)
      ([shift={(0pt,\BoxP)}]frame.south east);
    \fill[outgoingtop]
      ([shift={(2pt,-\BoxP)}]frame.north west) --
      ([shift={(-2pt,-\BoxP)}]frame.north east) to[out=90,in=0]
      ([shift={(-\BoxP,-2pt)}]frame.north east) --
      ([shift={(\BoxP,-2pt)}]frame.north west) to[out=180,in=90]
      cycle;
  },
  width=7cm,
  bottom=0pt,
  capture=minipage,
  enlarge left by=2cm,
  fontupper=\sffamily,
  attach boxed title to top right,
  coltitle=black,
  fonttitle=\sffamily,
  boxed title style={size=small,frame empty,interior empty},
  title=#1,
  left=2pt,
  right=2pt
}
\begin{document}

\begin{tcbSMS}{10656678}
\incoming{10:23}{Hello!}
\outgoing{10:23}{Hello!\\ What are you doing?}
\incoming{10:25}{I'm a little busy now}
\outgoing{10:26}{Oh, will you go for dinner tonight?}
\incoming{10:28}{Sorry. I would like to, but\ldots}
\outgoing{10:30}{It doesn't matter, so next time.}
\end{tcbSMS}

\end{document}