Redesign da página de chat para uma experiência de usuário diferente

Geral
1

Fiz alguns ajustes simples na página de chat para melhorar o design e torná-la mais fluida. Aqui está um resumo das alterações que fiz:

  1. Movi o Indicador de Digitação:
    Reposicionei o indicador de digitação para que ele agora apareça acima da caixa de texto em vez de abaixo dela. Isso parece mais natural e é mais fácil de notar quando alguém está digitando.
  2. Aumentei o Tamanho da Fonte do Indicador de Digitação:
    Aumentei um pouco o tamanho da fonte do indicador de digitação. Agora ele é mais visível e se destaca um pouco mais, facilitando a leitura rápida.
  3. Organizei as Imagens:
    Removi o nome/URL do documento que costumava cercar as imagens e adicionei um pequeno raio de borda a elas. Isso dá às imagens um visual mais limpo e polido, removendo a desordem desnecessária.
  4. Tornei o Indicador de Digitação Mais Dinâmico:
    Adicionei um pequeno efeito dinâmico ao indicador de digitação. Agora, quando ele aparece, as mensagens deslizam um pouco para cima para dar espaço, e quando o indicador desaparece, as mensagens deslizam de volta para baixo. Essa transição suave torna toda a experiência mais fluida e interativa.

Esses são apenas pequenos ajustes de design. Para mim, parece mais limpo, mais suave e, no geral, mais polido. Me diga o que você acha e sinta-se à vontade para sugerir quaisquer outras alterações ou melhorias!

Aqui está o código:

// typing indicator
/* Add space below the replying indicator */
.chat-replying-indicator-container {
  order: -1; /* Moves the replying indicator above the text area */
}


.chat-composer__outer-container {
    display: flex
;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding-inline: 0rem;
    padding-bottom: 1rem;
}

.chat-message-collapser .chat-message-collapser-header {
  display: none;
  align-items: center;
}


.chat-message .onebox img:not(.ytp-thumbnail-image, .onebox-avatar-inline),
.chat-message img.onebox,
.chat-message .chat-uploads img,
.chat-message p img,
.chat-message aside.onebox .onebox-body .aspect-image-full-size,
.chat-message aside.onebox .onebox-body .aspect-image-full-size img,
.chat-message .chat-message-text p img:not(.emoji) {
  object-fit: cover; /* Cover the container to preserve the border-radius */
  max-height: 300px;
  max-width: 90%;
  width: unset;
  overflow: hidden;
  border-radius: 20px; /* Rounded corners */
}


.chat-replying-indicator {
  color: var(--primary-medium);
  display: inline-flex;
  font-size: 1em;
  padding-bottom:10px;
}

.chat-replying-indicator-container {
    margin-bottom: 10px; /* Adjust the value as needed */
    margin-top: -20px;
}
.chat-replying-indicator-container {
    margin-top: -30px; /* Default position when not typing */
    transition: margin-top 0.3s ease; /* Smooth transition */
}

.chat-replying-indicator-container:has(.chat-replying-indicator__text) {
    margin-top: 0px; /* Position when typing */
}

PS: Isso é especialmente para celular.

É assim que está agora:

2 curtidas
2

Seu vídeo parece estar com defeito. Talvez reenvie-o?

1 curtida
3

Para transparência, editei seu título. :wink:

3 curtidas
4

Hehe, eu sempre uso o Título do Tópico da IA :stuck_out_tongue:

5

Não tenho certeza do porquê isso está acontecendo desde ontem. Eu e o @Don tivemos uma conversa sobre o mesmo problema, e funcionou depois de um tempo, mas agora quebrou novamente.

1 curtida
6

Funciona para mim agora

7

Sim, na verdade eu reenviei o vídeo usando um Mac; o problema geralmente acontece com o iOS para mim :((