<commit_before>import {
  Box,
  BoxProps,
  Color,
  DownloadIcon,
  Flex,
  FlexProps,
  Image,
  Sans,
  color,
} from "@artsy/palette"
import { Message_message } from "v2/__generated__/Message_message.graphql"
import React from "react"
import { createFragmentContainer } from "react-relay"
import { graphql } from "relay-runtime"
import { TimeSince } from "./TimeSince"
import styled from "styled-components"
import {
  AlignSelfProps,
  BackgroundProps,
  alignSelf,
  background,
} from "styled-system"
import Linkify from "react-linkify"

const AttachmentLink = styled.a`
  width: min-content;
  text-decoration: none;
  max-width: 66.67%;
`

const AttachmentContainer = styled(Flex)<
  FlexProps & AlignSelfProps & BackgroundProps
>`
  ${alignSelf};
  ${background};
  border-radius: 15px;
  white-space: no-wrap;
  width: min-content;
  justify-content: space-between;
`

const MessageText = styled(Sans)`
  white-space: pre-line;
  && {
    a:hover {
      color: currentcolor;
    }
  }
`

interface AttachmentProps {
  attachment: Message_message["attachments"][0]
  alignSelf: string
  bgColor: Color
  textColor: Color
}

export const Attachment: React.FC<AttachmentProps> = props => {
  const { attachment, alignSelf, bgColor, textColor } = props

  return (
    <AttachmentLink href={attachment.downloadURL} target="_blank">
      <AttachmentContainer
        p={1}
        mt={0.5}
        alignSelf={alignSelf}
        background={color(bgColor)}
      >
        {attachment.contentType.startsWith("image") ? (
          <Image src={attachment.downloadURL} />
        ) : (
          <>
            <Sans color={textColor} weight="medium" size="4" mr={2}>
              {attachment.fileName}
            </Sans>
            <DownloadIcon width="24px" height="24px" />
          </>
        )}
      </AttachmentContainer>
    </AttachmentLink>
  )
}
interface MessageProps extends Omit<BoxProps, "color"> {
  message: Message_message
  initialMessage?: string
  isFirst: boolean
  showTimeSince?: boolean
}
const Message: React.FC<MessageProps> = props => {
  const { message, initialMessage, isFirst, showTimeSince, ...boxProps } = props
  const { isFromUser, body } = message
  const text = isFirst ? initialMessage : body
  const bgColor = isFromUser ? "black100" : "black10"
  const textColor = isFromUser ? "white100" : "black100"
  const alignSelf = isFromUser ? "flex-end" : undefined
  return (
    <>
      <Box
        {...boxProps}
        bg={bgColor}
        p={1}
        style={{
          borderRadius: "15px",
          alignSelf,
        }}
        maxWidth="66.67%"
      >
        <MessageText size="4" color={textColor}>
          <Linkify properties={{ target: "_blank" }}>{text}</Linkify>
        </MessageText>
      </Box>
      {message.attachments.length > 0 &&
        message.attachments.map(attachment => {
          return (
            <Attachment
              key={attachment.id}
              attachment={attachment}
              alignSelf={alignSelf}
              textColor={textColor}
              bgColor={bgColor}
            />
          )
        })}
      {showTimeSince && (
        <TimeSince time={message.createdAt} style={{ alignSelf }} mt={0.5} />
      )}
    </>
  )
}

export const MessageFragmentContainer = createFragmentContainer(Message, {
  message: graphql`
    fragment Message_message on Message {
      internalID
      body
      createdAt
      isFromUser
      from {<commit_msg>Use workaround to open link in conversations in a new window<commit_after>import {
  Box,
  BoxProps,
  Color,
  DownloadIcon,
  Flex,
  FlexProps,
  Image,
  Sans,
  color,
} from "@artsy/palette"
import { Message_message } from "v2/__generated__/Message_message.graphql"
import React from "react"
import { createFragmentContainer } from "react-relay"
import { graphql } from "relay-runtime"
import { TimeSince } from "./TimeSince"
import styled from "styled-components"
import {
  AlignSelfProps,
  BackgroundProps,
  alignSelf,
  background,
} from "styled-system"
import Linkify from "react-linkify"

const AttachmentLink = styled.a`
  width: min-content;
  text-decoration: none;
  max-width: 66.67%;
`

const AttachmentContainer = styled(Flex)<
  FlexProps & AlignSelfProps & BackgroundProps
>`
  ${alignSelf};
  ${background};
  border-radius: 15px;
  white-space: no-wrap;
  width: min-content;
  justify-content: space-between;
`

const MessageText = styled(Sans)`
  white-space: pre-line;
  && {
    a:hover {
      color: currentcolor;
    }
  }
`

interface AttachmentProps {
  attachment: Message_message["attachments"][0]
  alignSelf: string
  bgColor: Color
  textColor: Color
}

export const Attachment: React.FC<AttachmentProps> = props => {
  const { attachment, alignSelf, bgColor, textColor } = props

  return (
    <AttachmentLink href={attachment.downloadURL} target="_blank">
      <AttachmentContainer
        p={1}
        mt={0.5}
        alignSelf={alignSelf}
        background={color(bgColor)}
      >
        {attachment.contentType.startsWith("image") ? (
          <Image src={attachment.downloadURL} />
        ) : (
          <>
            <Sans color={textColor} weight="medium" size="4" mr={2}>
              {attachment.fileName}
            </Sans>
            <DownloadIcon width="24px" height="24px" />
          </>
        )}
      </AttachmentContainer>
    </AttachmentLink>
  )
}
interface MessageProps extends Omit<BoxProps, "color"> {
  message: Message_message
  initialMessage?: string
  isFirst: boolean
  showTimeSince?: boolean
}
const Message: React.FC<MessageProps> = props => {
  const { message, initialMessage, isFirst, showTimeSince, ...boxProps } = props
  const { isFromUser, body } = message
  const text = isFirst ? initialMessage : body
  const bgColor = isFromUser ? "black100" : "black10"
  const textColor = isFromUser ? "white100" : "black100"
  const alignSelf = isFromUser ? "flex-end" : undefined

  // react-linkify v1.0.0-alpha has a bug that `properties` doesn't work.
  // This is a workaround to specify target for now.
  // https://github.com/tasti/react-linkify/issues/78#issuecomment-514754050
  const linkTargetDecorator = (href, text, key) => (
    <a href={href} key={key} target="_blank">
      {text}
    </a>
  )

  return (
    <>
      <Box
        {...boxProps}
        bg={bgColor}
        p={1}
        style={{
          borderRadius: "15px",
          alignSelf,
        }}
        maxWidth="66.67%"
      >
        <MessageText size="4" color={textColor}>
          <Linkify componentDecorator={linkTargetDecorator}>{text}</Linkify>
        </MessageText>
      </Box>
      {message.attachments.length > 0 &&
        message.attachments.map(attachment => {
          return (
            <Attachment
              key={attachment.id}
              attachment={attachment}
              alignSelf={alignSelf}
              textColor={textColor}
              bgColor={bgColor}
            />
          )
        })}
      {showTimeSince && (
        <TimeSince time={message.createdAt} style={{ alignSelf }} mt={0.5} />
      )}
    </>
  )
}

export const MessageFragmentContainer = createFragmentContainer(Message, {
  message: graphql`
    fragment Message_message on Message {
      internalID
      body
      createdAt
      isFromUser
      from {
{'fraction_non_alphanumeric': 0.12310217480508823, 'fraction_numerical': 0.012583777868964575, 'mean_word_length': 2.625185919682697, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 62, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5036979', 'n_tokens_mistral': 2265, 'n_tokens_neox': 2208, 'n_words': 485}