Flutter AI Assistant Chat Bubble Card

WDiv(
  className: '''
    relative mx-auto w-[420px] overflow-hidden rounded-3xl p-6
    bg-gradient-to-br from-violet-900 via-indigo-900 to-slate-900
    dark:from-violet-950 dark:via-indigo-950 dark:to-slate-950
    shadow-2xl shadow-black/40 dark:shadow-black/60
  ''',
  children: [
    WDiv(
      className: 'absolute -top-10 -right-8 w-40 h-40 rounded-full bg-violet-500/30 dark:bg-violet-500/20',
    ),
    WDiv(
      className: 'flex flex-col gap-5',
      children: [
        WDiv(
          className: 'flex flex-row items-center gap-3',
          children: [
            WDiv(
              className: '''
                w-11 h-11 rounded-2xl
                bg-gradient-to-br from-fuchsia-500 to-indigo-500
                dark:from-fuchsia-600 dark:to-indigo-600
                flex flex-row items-center justify-center
              ''',
              child: WIcon(
                Icons.bolt,
                className: 'text-xl text-white dark:text-white',
              ),
            ),
            WDiv(
              className: 'flex-1 flex flex-col',
              children: [
                WText(
                  'Flutter AI',
                  className: 'text-base font-bold text-white dark:text-white',
                ),
                WDiv(
                  className: 'flex flex-row items-center gap-1',
                  children: [
                    WDiv(
                      className: 'w-2 h-2 rounded-full bg-emerald-400 dark:bg-emerald-400',
                    ),
                    WText(
                      'Online',
                      className: 'text-xs font-medium text-white/60 dark:text-white/60',
                    ),
                  ],
                ),
              ],
            ),
            WIcon(
              Icons.more_horiz,
              className: 'text-xl text-white/60 dark:text-white/60',
            ),
          ],
        ),
        WDiv(
          className: '''
            w-full flex flex-col gap-3 p-4 rounded-2xl
            border border-white/15 dark:border-white/10
            bg-white/10 dark:bg-white/5
          ''',
          children: [
            WText(
              'Here is a clean way to center any widget in Flutter:',
              className: 'text-sm font-medium text-white dark:text-white',
            ),
            WDiv(
              className: '''
                w-full p-3 rounded-xl
                bg-black/30 dark:bg-black/40
                border border-white/10 dark:border-white/10
              ''',
              child: WText(
                'Center(child: Text("Hello"))',
                className: 'text-xs font-medium text-emerald-300 dark:text-emerald-300',
              ),
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row',
          child: WDiv(
            className: '''
              flex flex-row items-center gap-2
              rounded-full px-4 py-2
              border border-white/15 dark:border-white/10
              bg-white/10 dark:bg-white/5
            ''',
            children: [
              WDiv(
                className: 'w-2 h-2 rounded-full bg-white/80 dark:bg-white/80',
              ),
              WDiv(
                className: 'w-2 h-2 rounded-full bg-white/60 dark:bg-white/60',
              ),
              WDiv(
                className: 'w-2 h-2 rounded-full bg-white/40 dark:bg-white/40',
              ),
              WText(
                'Flutter AI is typing',
                className: 'text-xs font-medium text-white/70 dark:text-white/70',
              ),
            ],
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center gap-2',
          children: [
            WDiv(
              className: '''
                rounded-full px-4 py-2
                border border-white/20 dark:border-white/15
                bg-white/5 dark:bg-white/5
              ''',
              child: WText(
                'Explain more',
                className: 'text-xs font-semibold text-white dark:text-white',
              ),
            ),
            WDiv(
              className: '''
                rounded-full px-4 py-2
                border border-white/20 dark:border-white/15
                bg-white/5 dark:bg-white/5
              ''',
              child: WText(
                'Show full code',
                className: 'text-xs font-semibold text-white dark:text-white',
              ),
            ),
          ],
        ),
      ],
    ),
  ],
)